|
|
Опубліковано 30.10.2014 14:39:28
|
|
|
Встановлення значення властивості на абсолютне витягне об'єкт із звичайного потік документа, незалежно від розташування навколишнього контенту. Якщо інші об'єкти з різними властивостями z-індексу вже займають певну позицію, вони не впливатимуть один на одного, а перекриватимуться в одній позиції. Об'єкт не має зовнішньої плями (поля), але все одно має внутрішню нашивку (паттинг) і рамку (облямівку).
Щоб активувати абсолютне положення об'єкта, потрібно вказати принаймні один із лівих, правих, верхніх і нижніх атрибутів і встановити це значення атрибута як абсолютне. Інакше наведені вище атрибути використовуватимуть своє автоматичне значення за замовчуванням, що змусить об'єкт відповідати звичайним правилам HTML-верстки і відображатися одразу після попереднього об'єкта.
Атрибути TRBL (ВЕРХ, ПРАВО, НИЗ, ЛІВО) дійсні лише за умови, що атрибут позиції встановлений.
Тобі слід встановити position:absolute
Якщо батьківський (нескінченний) не встановлює атрибут позиції, то поточний абсолют розміщується у поєднанні з атрибутом TRBL у верхньому лівому куті браузера як початковою точкою
Якщо батьківський (нескінченний) встановлює властивість позиції, то поточний абсолют розміщується у поєднанні з властивістю TRBL у верхньому лівому куті батьківського (недавнього) як початкової точки.
При встановленні позиції: відносна
Верхній лівий кут батьківської (недавньої) області вмісту — це початкова точка, поєднана з атрибутом TRBL (або зміщена відносно попереднього елемента розміщеного елемента в області батьківського контенту), а верхній лівий кут BODY — це початкова точка без батьківського елемента. Відносне позиціонування не можна багатошаровим. При використанні відносного положення елемент все одно займає свій початковий простір незалежно від того, чи переміщений він чи ні. Отже, переміщення елемента призводить до того, що він перезаписує інші блоки.
Загалом, якщо веб-сторінка розташована по центру, легко допустити помилки при використанні Absolute, оскільки веб-сторінка завжди автоматично адаптувалася відповідно до розміру роздільної здатності, тоді як Absolute використовує верхній лівий кут браузера як початкову точку і не змінює положення через зміну роздільної здатності. Іноді також необхідно покладатися на z-індекс для встановлення співвідношення між верхньою та нижньою частинами контейнера: чим більше значення, тим вищий верх, а числовий діапазон є натуральним числом. Звісно, варто зазначити, що відношення батька-дитина не можна встановити з індексом z, і рівень дочірнього має бути вище і нижче батьківського рівня.
Встановлення значення властивості у відносному зберігає об'єкт у звичайному HTML-потоці, але його позицію можна зміщувати залежно від попереднього об'єкта. Текст або об'єкти, що слідують за відносним локатором, займають власний простір, не покриваючи природний простір об'єкта, що розташовується. Натомість текст або об'єкт після об'єкта абсолютного позиціонування займає свій природний простір до того, як цільовий об'єкт буде відтягнутий від звичайного потоку документа. Розміщення абсолютного позиційного об'єкта поза вікном перегляду викликає появу смуги прокрутки. Розміщення відносного об'єкта поза зоною перегляду не відображається за допомогою смужки прокрутки. Насправді головна проблема з позиціонуванням полягає в тому, щоб запам'ятати значення кожного положення. Відносне позиціонування — це початкове положення елемента «відносно» потоку документів, тоді як абсолютне позиціонування — це елемент-предок, який був розміщений «відносно» найновішого.
Ось доповнення:
Хоча я знаю абсолютне (абсолютне) і відносне розташування CSS, я ніколи не писав відповідні ефекти самостійно!
Після роботи понад півдня його можна вважати завершеним! Я також зрозумів деякі з цих двох атрибутів!
Резюме таке:
Давайте спочатку розглянемо наступну структуру шарів
<body>
<div id=posi>
<div id=rel> Цей шар застосовує лише position:relative; Стиль </div>
<div id=abs> Цей шар застосовує лише position:absolute; Стиль </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>застосовує стилі
<div id=rel> Цей шар застосовує position:relative; вниз:30px; Стиль </div>
<div id=abs> Цей шар застосовує лише position:absolute; вниз:30px; Стиль </div>
</div>
</body>
Наведений вище код:
Шар з id rel піднімається вгору і накладається на шар з id SSS
Шар з ID ABS буде переміщений на відстань 30 пікселів від вікна, де вікно буде базовою лінією!
4. При комбінуванні верхніх, нижніх, правих, лівих та інших атрибутів, якщо ви хочете, щоб абсолютний (абсолютне позиціонування) використовували батьківський шар як базову лінію, можна застосувати абсолютні або релятивні атрибути до батьківського шару! А саме:
<body>
<div id=posi style="position:relative">
<div id=rel> Цей шар застосовує position:relative; вниз:30px; Стиль </div>
<div id=abs> Цей шар застосовує лише position:absolute; вниз:30px; Стиль </div>
</div>
</body>
Вищенаведений код: id — це шар posi, ви також можете використовувати атрибут абсолюту!
id — це шар REL, який не піддається впливу і зміщується власним заповнювачем як базовою лінією!
Шар з id як ABS базується на нижньому краю шару POSI як базовій лінії позиціонування, якщо висота шару POSI зараз менше 30px, шар ABS може не бачити його!
|
Попередній:Учні Ву Жуань, будь ласка, не йдіть у «Гуанбутун» купувати комп'ютер! Щоб не бути обманутим!Наступний:Як видалити підкреслення гіперпосилання в html?
|
