CSS තත්ත්වය: උදාහරණ

. පිරිසැලසුම-ආරම්භක බොහෝ විට CSS මගින් ස්ථානගත මූලද්රව්ය සමග අපහසුතා ඇති වේ. Position куда проще в освоении, чем кажется на первый взгляд. ඇත්ත වශයෙන්ම, CSS තත්ත්වය දේපල එය බැලූ බැල්මට පෙනේ වඩා ඉගෙන ගැනීමට වඩාත් පහසු වේ. ඔවුන් ප්රගුණ කිරීමෙන්, ඔබ සමග නියම ස්ථානවල සියලු පිටුව අංග සූදානම් කළ හැකි ප්රබල මෙවලමක් ලබා ගන්න. добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются එහෙත් ප්රතිඵල ලබා ගැනීම සඳහා, ඔබ සියලු පවතින වටිනාකම් ගැන දැන ගැනීමට, ඔවුන්ගේ ක්රියා මූලධර්ම ඉතා වෙනස් වන නිසා අවශ්ය

බලන්න ගලා සුවිශේෂත්වයන්

работает с потоком веб-страницы. තත්ත්වය CSS වෙබ් පිටු, ප්රවාහය සමග ක්රියා කරයි. මෙය තේරුම් ගන්නේ කෙසේද? html- разметке. සුපුරුදු පරිදි, සියලු පිටුව අංග ඔබ html- සලකුණු ඔවුන් නිර්මාණය කරන පිණිස සංවිධානය කරනු ලැබේ. header расположен над тегом footer, то и на странице он будет отображаться выше. මෙම ටැගය පාදකය මත පිහිටා ශීර්ෂ ටැගය නම්, පසුව එය පිටු ඉහත ප්රදර්ශනය වනු ඇත. footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». අනිත් අතට, ඔබ "Heder", "පහළම මාලය" පිටුවේ html දී පාදකය තැනින් තීරණය යම් හේතුවක් නිසා නම්, "තොප්පිය" ඉහත ප්රදර්ශනය වනු ඇත. මේ අවස්ථාවේ දී, බ්ලොක් මට්ටමේ අංග සඳහා ඔවුන් වෙත පවත්නා සමස්ත පළල අල්ලා ගනී. සිම්පල්, අනෙක් අතට, එක පේළියක, ඒ සියල්ල නො වන අතර සංවිධානය කර ඇති අතර, පසුව නව එක් බැර කළ යුතු වෙනවා. මෙම පටිපාටිය "ලේඛනයේ ප්රවාහය." ලෙස ද හඳුන්වනු ලැබේ

තත්ත්වය දේපල යොදා ගලා හැසිරීම වෙනස් කිරීමට . CSS තුළ. float, но его мы рассматривать не будем. එය ද පාවෙන ගුණ නිසා වෙනස් විය හැක, නමුත් එය සලකනු නොලැබේ. ස්ථානගත සාමාජිකයෙකු පසුව එය වෙනස් හැසිරීමක් ආරම්භ වනු ඇත පොදු විෂය ධාරාව, සිට "වැටී" වෙත ඉදිරිපත් කළ හැකි සමඟ. කොහොමද හරියටම - එය දේපළ භාවිතා අගය මත රඳා පවතී.

CSS තත්ත්වය: ස්ථිතික

или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. තත්ත්වය: ස්ථිතික, හෝ ස්ථිතික පිහිටුම් ඔබ විසින් නිර්මාණය කර තිබෙන සියලු html කුට්ටි සඳහා ප්රකෘතිය වේ. සාමාන්ය තත්වයන් යටතේ, ඔබ ඔහු සමඟ කටයුතු කිරීමට අවශ්ය නැත. static. ඕනෑම වාරණ හෝ රේඛාවක් ඕනෑම ස්ථානය නිශ්චිතව දක්වා නොමැති විට, එම නිසා එය වැදගත් ස්ථිතික වේ. පිටුව මත බව අංගයක් ගලා අනුව දර්ශනය වේ. right/left или top/bottom, никакого эффекта не будет. ඔබ ඔහු දේපල අයිතිය / වම් හෝ ඉහල / පහළ පෙන්වන්න නම්, කිසිදු බලපෑමක් වනු ඇත.

CSS තත්ත්වය: ස්ථාවර

оказывается вне нормального потока документа. මෙම දේපල භාවිතා කරන විට, එම මූලද්රව්යය ලේඛනයේ සාමාන්ය ගලා පිටත වේ. относительно окна браузера, независимо от того, как размещаются прочие компоненты. දැන් ඔහුගේ තත්ත්වය නොසලකා අනෙකුත් අංග පිහිටා ආකාරය, බ්රවුසරය ඇති වින්ඩෝව සාපේක්ෂව ගණනය කෙරේ. : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком. වෙනත් වචන වලින් කිවහොත්, තත්ත්වය සමඟ වාරණ: ස්ථාවර බ්රවුසරය ඇති වින්ඩෝව අද්දර එරෙහිව තද කර, පිටුවේ ඉහළ හැර, සහ අනෙකුත් මූලද්රව්ය ගලා අනුව එහි සිදු වෙනවා.

ස්ථාවර ස්ථානගත මූලද්රව්ය ප්රධාන ලක්ෂණය ඔවුන් අනෙක් කොටස් හා පිටු string පැටලෙන්නේ හැකි බව ය. : fixed будет будто бы оставаться на месте, не исчезая с экрана. අනුචලනය විට සහිත තත්වය වාරණ: ස්ථාවර යයි කියන තිරය අතුරුදහන් තොරව ස්ථානයේ රැඳී සිටිනු ඇත. ඔබ ගමන් කිරීමට හෝ පරිශීලක හැම විටම ප්රවේශ තිබිය යුතුය කිරීමට, වගේ අවශ්ය නම් මෙය ප්රයෝජනවත් වේ. ඔබ පිටුව එක්තරා කොටසක් ඉක්මන් අනුචලන බොත්තම ප්රදර්ශනය කිරීමට අවශ්ය නම්, ස්ථාවර පිහිටුම් ද භාවිතා කරයි.

CSS තත්ත්වය: සාපේක්ෂ

. මෙම දේපල භාවිතා කරමින් සාපේක්ෂ පිහිටුම් ලෙස හැඳින්වේ. : relative, тот останется на своем месте. ඔබ අයිතමය දේපල තත්ත්වය සකස් නම්: සාපේක්ෂ, ඔහු ඒ වෙනුවට පවතිනු ඇත. right/left и top/bottom. බැලූ බැල්මට, බොහෝ කිසිවක් සිදු නොවුන, නමුත් තව දුරටත් භාවිතා ගුණ අයිතිය / වම් සහ ඉහල / පහළ නම් සියලු වෙනස්. ඔවුන් එහි පිහිටීම කිරීමට අංගයක් සාපේක්ෂව ව්යාපාරය පාලනය කිරීම සඳහා භාවිතා කළ හැක. останутся на своих положениях, не обращая внимания на освободившееся место . වාරණ හෝ මාර්ගය භාවිතා කරන අවස්ථාව එම ස්ථානයෙහි, හිස් අවකාශය වනු ඇත - තවත් අංග වූ පුරප්පාඩුව සඳහා අවධානය යොමු නොකරන, ඔවුන්ගේ තනතුරු දරති.

ඔබ ගමන් කරන විට එම සංඝටකයේ පිටුවේ අවට ප්රදේශවල තත්වය බලපාන නීතියක් නොවේ. සාපේක්ෂව ස්ථානගත වාරණ ඒවා අවහිර කළ හැක නමුත් ඔවුන්, ස්ථානයේ රැඳී සිටිනු ඇත. තුලමත්, දේපල කලාතුරකින් භාවිතා කරයි. එය සාමාන්යයෙන් පහත සඳහන් ලිපිය දිගු සමඟ එක්ව භාවිතා කරයි.

නිරපේක්ෂ ස්ථානගතකරණය

වඩාත් රසවත් හා වඩාත් නිතරම භාවිතා විකල්ප වලින් එකක්. ගුණ තත්ත්වය භාවිතා කරන විට absolute положение компонента страницы будет высчитываться относительно окна браузера. මෙම පිටුව සංරචකයේ නිරපේක්ෂ පිහිටීම වටිනාකම බ්රවුසරය ඇති වින්ඩෝව සාපේක්ෂව ගණනය කරන සමඟ. элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. වෙනත් මූලද්රව්ය (-පරම නොවන ස්ථානගත) එම තත්ත්වය පැවතීම "සහෝදරයා" ගැන "අමතක" වැනි: පරම හා අංශයෙන් ඔහුගේ තැන ගෙන ඇත. : fixed, но есть и серьезные различия. එය හැම දෙයක්ම තත්ත්වය පිළිබඳ පැමිණිල්ලේ දී මෙන් හරියටම සමාන වන්නේ පෙනෙන්නට: ස්ථාවර, නමුත් වැදගත් වෙනස්කම් ඇත.

top/right/bottom/left. පළමු වැන්න නම්, අංගයක් තත්වය නිදහසේ පාලනය කළ හැක - මෙම දේපල ඉහළ / අයිතිය / පහළ / වම් සදහා භාවිතා කරනු ලැබේ. bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. උදාහරණයක් ලෙස, ඔබ පහළ වටිනාකම නියම නම්: 100px, වාරණ පිටුව 100 පික්සල පතුලේ සිට "කපා තල්ලු". දෙවනුව, "පරම" සංරචකය අනුචලනය විට ඒ වෙනුවට පිටුවට ගමන් කිරීමට ඇති, සේවා ස්ථානය තුළ රැඳී සිටිනු ඇත.

මව් අංග සමඟ අන්තර් පරම ඒකක

ඔබ හරියටම ස්ථානගත අංගයක් කට වඩා නිවැරදි පාලන ලබා ගත හැකි වනු ඇත. : fixed, relative или absolute. ස්ථාවර, ඥාතියකු හෝ නිරපේක්ෂ: මෙය සිදු කිරීම සඳහා, ඔබ එහි මව් දේපල තත්ත්වය සකස් කළ යුතුය.

උදාහරණයක් සලකා බලන්න. div с классом relative-div, внутри которого размещается div с классом absolute-div. ඔබ පරම-div පන්ති සමග div තැන්පත් කර ඇති ඇතුලත, සාපේක්ෂ-div ක පන්තිය සමග div ඇති කරන්න එපා. : absolute. නිරපේක්ෂ: අපි ගෘහස්ථ ඒකකය දේපල තනතුර කළේය. ඔහු වහාම අංශයෙන් "වීමටයි" හා දැන් එහි පිහිටීම බ්රවුසරය ඇති වින්ඩෝව සාපේක්ෂව ගණනය නිසා, ඉහළ කොහේ හරි ය. relative-div свойство Position : relative и «блудный сын» возвращается на место. දැන් පන්ති සාපේක්ෂ-div තත්ත්වය, දේපළ සමග වාරණ ලබා: සාපේක්ෂ සහ "නාස්තිකාර පුත්රයා" නැවත ද ක්රියාත්මක වේ. පාහේ. ඇත්ත වශයෙන්ම, එය මව් අංගයක් ඉහළ වම් කෙළවරේ පෙනී යයි.

ඇයි මේ වෙන්නේ? : absolute. මෙම නිශ්චිතභාවයකින් ගුණ තත්ත්වය තුළ කටයුතු: පරම. static, позиция начинает зависеть от родительского элемента. සුපුරුදු පරිදි, එහි පිහිටීම ඔබගේ බ්රවුසරයේ මත රඳා පවතී, නමුත් "මව්" ද ස්ථිතික නමුත් කිසිම දෙයක් ලෙස ස්ථානගත වී තිබේ නම්, තත්වය මව් අංගයක් මත රඳා පවතී ආරම්භ කිරීමයි. ඔබ බ්රවුසරය ඇති වින්ඩෝව සාපේක්ෂව proschityvaya විශාල සංඛ්යාව තොරව ඕනෑම තැනක අංගයක් තැබිය හැකි නිසා මෙම විශාල වේ. ඇතුළත් බොහෝ විට අයිකන, බොත්තම් සහ අනෙකුත් භාණ්ඩ සහ කුඩා තැනින් භාවිතා කරයි.

තත්ත්වය CSS කේන්ද්ර

ප්රධාන දුෂ්කරතා ආරම්භක එක් සිරස්ව හා තිරස්ව එම මූලද්රව්යය මධ්යස්ථානය වේ. , сделать это проще простого. නිසි තත්ත්වය දේපල භාවිතා, එය පහසු කරයි. CSS තත්ත්වය පහත සඳහන් පරිදි පරම මධ්යස්ථානය නියම කර ඇත. iv с классом absolute-div, который находится в «диве» с классом relative-div. ගේ ඔබ පන්ති සාපේක්ෂ-div කිරීමට "දීවා" තුළ වන පන්ති ඈ iv පරම-div ඇති, කියන්න මට ඉඩ දෙන්න. "මාපිය" හා එහි පළල සමස්ත පිටු පළල සමාන කිරීමට ස්ථානගත සාපේක්ෂ. и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента. "පැවත" පළල සහ 400 px ක උස, නිරපේක්ෂ ස්ථානගතකරණය ඇති අතර, මව් අංගයක් ඉහළ වම් කෙළවරේ පෙරනිමියෙන් පිහිටා ඇත.

top: 50 % и left: 50 %. 50% ක් හා වම්: 50% - ඔබ කළ යුතු සියල්ල පරම අංගයක් ඉහළ නියම කිරීමයි. බොහෝදුරට සම්පූර්ණයි! сдвинулся с места и оказался почти в центре, но не совсем. පරම-div බාල්දියත් සහ මධ්යයේ පාහේ, නමුත් සාර්ථක වුණේ නැහැ. "මව්" ඔහුගේ අවසන් සම්බන්ධ අදහස්, අපි වාරණ මධ්යයේ ලබා ගැනීමට අවශ්ය මධ්යස්ථානය බව ඔප්පු "බීජ." margin-left и margin-right со значениями -200 px. මෙය සිදු කිරීම සඳහා, ඔබ වටිනාකම් -200 px ඔහුට ඉඩක් වම හා ආන්තික-දකුණු අසාගත යුතුයි. මේ අනුව, අප එහි උස හා පළල අඩක් මත පරම ස්ථානගත වාරණ ප්රචාරය. සියලු එය මැද!

අතිච්ඡාදනය සංරචක

ප්රශ්නය දුෂ්කර, බැලූ බැල්මට, ඔවුන්ගේ "අසල්වැසියන්" වෙත ස්ථානගත අංග "පැනවීම" විය හැක. : fixed будет перекрывать все, что расположено на странице. උදාහරණයක් ලෙස, අංගයක් තත්ත්වය: ස්ථාවර පිටුව සියලු පිහිටා යටපත් කරනු ඇත. z-index, однако помните, что оно работает только для позиционированных элементов. මෙම තත්ත්වය මඟ හරවා, ඔබට z-දර්ශකයේ ගුණ භාවිතා කරන්න, නමුත් එය පමණක් ස්ථානගත මූලද්රව්ය සඳහා ක්රියා කරන ඔබට මතක තබා ගත හැක. ඒ අනුව, ඔබ ස්ථාවර ස්ථානගත අංගයක් මුදුනේ වාරණ ස්ථානයක් ලබා ගැනීමට කැමති නම්, මෙම ඒකකය ස්ථානගත කර ඇත. උදාහරණයක් ලෙස, යම් ඥාතියෙකු.

учший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. ස්ථානගත කිරීම ප්රගුණ කිරීමට හොඳම ක්රමය - වෙනස් දෙයක් අත්හදා බැලීම් හා උත්සාහ කිරීමට, උදාහරණ තත්ත්වය CSS සලකා බලන ලදී. calc() – это даст возможность более гибко настраивать расположение. මෙම උත්සවයට Calc (සමඟ එක්ව එය භාවිතා කිරීමට ඉගෙන ගැනීමට උත්සාහ කරන්න) - මෙම තත්වය වෙනස් කිරීම සඳහා වඩාත් නම්යශීලී හැකි වනු ඇත. කෙසේ වෙතත්, මෙම දේපළ සමස්ත "ශුද්ධ" පිටු නිර්මාණය සඳහා රිසි නොවන බව මතක තබා ගන්න. ඒ සමග, ඔබ, සාපේක්ෂ වශයෙන් සුළු අංග චලනය කිරීමට අවශ්ය, හෝ ව්යාකූල ලබා ගැනීමට ද පහසු විය හැක.