|
|
Публикувано в 30.10.2014 г. 14:39:28 ч.
|
|
|
Задаването на тази стойност на свойството на абсолютна ще изтегли обекта извън нормалното позициониране на документния поток, независимо от оформлението на съдържанието около него. Ако други обекти с различни z-индексни свойства вече заемат дадена позиция, те няма да се влияят един на друг, а ще се припокриват в една и съща позиция. Обектът няма външно петно (margin), но все пак има вътрешен петно (patding) и рамка (рамка).
За да активирате абсолютното позициониране на обекта, трябва да зададете поне един от лявата, дясната, горната, долната стойност на атрибута и да зададете стойността на този атрибут на абсолютна. В противен случай горните атрибути ще използват автоматичната си стойност по подразбиране, което ще накара обекта да следва обичайните правила за оформление на HTML и да се рендерира веднага след предишния обект.
TRBL атрибутите (ГОРЕ, ДЯСНО, ДОЛНО, ЛЯВО) са валидни само ако атрибутът позиция е зададен.
Трябва да зададеш позиция:абсолютен
Ако родителят (безкраен) не задава атрибута позиция, тогава текущият абсолют се позиционира в комбинация с атрибута TRBL в горния ляв ъгъл на браузъра като оригинална точка
Ако родителят (безкраен) задава свойството на позицията, тогава текущият абсолют се позиционира в комбинация с свойството TRBL в горния ляв ъгъл на родителя (скорошния) като оригинална точка.
При задаване на позиция: относителна
Горният ляв ъгъл на родителската (скорошна) съдържателна област е оригиналната точка, комбинирана с атрибута TRBL (или изместена спрямо предишния елемент на позиционирания елемент в основната област), а горният ляв ъгъл на BODY е оригиналната точка без родителя. Относителното позициониране не може да се наслоява. При използване на относително позициониране елементът все още заема първоначалното си пространство, независимо дали е преместен или не. Следователно, преместването на елемент кара той да презаписва други кутии.
Общо взето, ако уеб страницата е центрирана, лесно може да се допуснат грешки при използване на Absolute, защото уеб страницата винаги се адаптира автоматично с размера на резолюцията, докато Absolute използва горния ляв ъгъл на браузъра като оригинална точка и няма да променя позицията поради промяната в резолюцията. Понякога е необходимо да се разчита и на z-индекса, за да се определи връзката между горната и долната част на контейнера – колкото по-голяма е стойността, толкова по-висока е горната, а числовият диапазон е естествено число. Разбира се, едно нещо, което трябва да се отбележи, е, че връзката родител-дете не може да се задава с z-индекс, а нивото на дете трябва да е над и под родителското.
Задаването на тази стойност на свойството на относително запазва обекта в нормален HTML поток, но позицията му може да бъде изместена въз основа на предишния обект. Текст или обекти, които следват относителен локатор, заемат собственото си пространство, без да покриват естественото пространство на обекта, който се позиционира. За разлика от това, текстът или обектът след абсолютния позициониращ обект заема естественото си пространство преди целевият обект да бъде изтеглен от нормалния поток на документа. Поставянето на обект за абсолютно позициониране извън прозореца кара да се появи лента за превъртане. Поставянето на обект за относително позициониране извън зоната на гледане не се появява с лента за превъртане. Всъщност основният проблем с позиционирането е да запомниш значението на всяко позициониране. Относителното позициониране е началната позиция на елемента "с" потока на документите, докато абсолютното позициониране е елементът-предшественик, който е бил позициониран "с" най-новия.
Ето допълненията:
Въпреки че знам абсолютното (абсолютно) позициониране и относителното позициониране на CSS, никога не съм писал съответните ефекти сам!
След повече от половин ден работа може да се счита за завършена! Също така разбрах някои от тези две характеристики!
Резюмето е следното:
Нека първо разгледаме следната структура на слоя
<body>
<div id=posi>
<раздел id=rel> Този слой прилага само позиция:относителна; Стил </div>
<разделение id=abs> Този слой прилага само позиция:абсолютна; Стил </div>
<div id=sss> не прилага <div>стилове
</div>
</body>
1. Абсолютен: Не заема място, Относителен: Има място!
Например надстройка:
Слоеве с id rel ще заемат един ред, когато се показват! ABS слоят зад него ще се появи само на следващата линия!
Когато слоят с id ABS се показва, той ще се припокрива с ID-то на SSS зад него!
2. По подразбиране (не е позициониран в комбинация с горната част и т.н.), абсолютното (абсолютното позициониране) е позиционирано от родителския слой
Например, ако горният слой с ID е ABS, ако не е позициониран в комбинация с TOP, позицията му на дисплея ще бъде с родителския слой POSI (POSI е в долния ляв ъгъл на документа и също ще бъде в долния ляв ъгъл).
3. При комбиниране на горни, долни, дясни, ляви и други атрибути, абсолютното (абсолютното позициониране) се позиционира с прозореца като позициониране, а относителното се измества със собственото си заемане като базова линия! Както следва:
<body>
<div id=posi>
<div id=sss> не прилага <div>стилове
<разделение id=rel> Този слой прилага позиция:относителна; долна:30px; Стил </div>
<разделение id=abs> Този слой прилага само позиция:абсолютна; долна:30px; Стил </div>
</div>
</body>
Горният код:
Слоят с id rel се придвижва нагоре и се припокрива слоя с id SSS
Слоят с ID ABS ще бъде преместен на 30 пиксела от прозореца с прозореца като базова линия!
4. Когато комбинирате горни, долни, дясни, ляви и други атрибути, ако искате absolute (absolute positioning) да използвате родителския слой като базова линия за позициониране, можете да приложите absolute или relative атрибути върху родителския слой! Както следва:
<body>
<div id=posi style="позиция:относителна">
<разделение id=rel> Този слой прилага позиция:относителна; долна:30px; Стил </div>
<разделение id=abs> Този слой прилага само позиция:абсолютна; долна:30px; Стил </div>
</div>
</body>
Горният код: id е слоят на posi, можеш да използваш и атрибута абсолют!
id е слоят на REL, който не е засегнат и е изместен от собствен заместител като базова линия!
Слоят с идентификатор като ABS се базира на долния ръб на слоя POSI като базова линия за позициониране, ако височината на слоя POSI е по-малка от 30px в момента, слоят ABS може да не го види!
|
Предишен:Учениците на У Жуан, моля, не ходете в "Гуангбутун" да купувате компютър! За да не бъдеш измамен!Следващ:Как да премахна долната част на хипервръзка в html?
|
