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