-
static (статическое позиционирование) Объект соответствует стандартному потоку документов, а такие свойства, как top, right, bottom, left, недействительны.
-
относительное (относительное позиционирование) Объект следует стандартному потоку документов и опирается на верхние, правые, нижние, левые и другие атрибуты для смещения относительно положения объекта в стандартном потоке документов, а каскадное отношение может быть определено с помощью z-индекса. .
-
Абсолютное (абсолютное позиционирование) Объект отделен от стандартного потока документов и абсолютно позиционируется с помощью таких свойств, как верхнее, правое, нижнее, левое (абсолютное позиционирование относительно первого родительского элемента, отличное от статического позиционирования), а каскадное отношение может определяться z-индексом.
-
fixed (фиксированное позиционирование) Объект отделяется от стандартного потока документов, используя верхнее, правое, нижнее, левое и другие свойства для абсолютного позиционирования (абсолютное позиционирование относительно окна браузера), а z-индекс может определять каскадную связь.
Смущенный? (Правильно путаться, но на вышеприведенное базовое определение нужно отвечать как на капли на фронтенд-интервью), давайте углубляем наше понимание с помощью экспериментов.
- Стандартный документ поток
Относится к стандартному потоку документов без использования других специальных правил CSS, связанных с расположением и расположением элементов правил расположения по умолчанию.
Элементы в документе HTML можно разделить на две категории: встроенные элементы и элементы блочного уровня. 1. Встроенный элемент — это узел дерева DOM. Не занимает отдельного места, прикрепляется к блочным элементам, встроенные элементы не имеют своей области.
2. Блочный элемент — это узел дерева DOM. Он всегда отображается в виде блоков, и располагается вертикально последовательно с одноуровневыми блоками на одном уровне, и автоматически растягивается влево и вправо до границы содержащего его элемента, который не может располагаться рядом в горизонтальном направлении.
Принцип позиционирования ящика в стандартном потоке:
Поле управляет расстоянием между полем и полем.Отступ существует внутри поля.Он не предполагает отношения и взаимного влияния с другими ящиками.Поэтому,чтобы точно контролировать положение поля,вы должны иметь более глубокое понимание маржа. .
(1) Горизонтальное поле между встроенными элементами
Когда два элемента находятся близко к линии, расстояние между ними равно первому элементу плюс левое и правое поля второго элемента. (2) вертикальная граница между блочным элементом
Два вертикально расположенных элемента блочного уровня, расстояние по вертикали между ними — это не сумма нижнего поля первого элемента выше и верхнего поля второго элемента, а большее из двух. Это должно обратить особое внимание на фактическое производство веб-страниц.
(3) Поле между вложенными прямоугольниками
В это время поля дочерних блоков располагаются относительно содержимого родительского блока.
(4) маржа установлена на отрицательное значение
Перемещает блоки с отрицательными числами в противоположном направлении и даже перезаписывает другие блоки.
1. static
Значения положения по умолчанию, никакого специального позиционирования, следуйте стандартному потоку документов, не делайте слишком много объяснений.
Рисунок 1: Стандартный документооборот
2. relative
Рисунок 2: Относительное расположение
Как видно из рисунка 2, относительный относится к положению объекта в стандартном потоке документов для размещения в соответствии с левым и верхним (конечно, правым и нижним также могут быть использованы. Этот пример предназначен только для экспериментального описания, и другие читатели могут проверить сами), левый и верхний не изменяют исходный след объекта в потоке документов.
Рисунок 3: Относительное расположение
Как видно из рисунка 3, при установке свойства margin изменяется и размерное пространство объекта в стандартном документообороте. Точно так же заполнение также изменит размерное пространство относительно расположенных объектов в стандартном потоке документов, как показано на рисунке 4.
Рисунок 4: Относительное расположение
Пока что relative (относительное позиционирование) всем понятно, давайте посмотрим на использование absolute.
3. absolute
Рисунок 5: Абсолютное позиционирование
Как видно из рисунка 5, абсолютное позиционирование выходит за рамки стандартного потока документов, и относительно первого родительского элемента, отличного от статического позиционирования, для абсолютного позиционирования используйте левое, верхнее (или правое, нижнее). Стоит отметить, что при использовании абсолютного позиционирования должно быть указано хотя бы одно из значений «слева», «сверху», «справа», «снизу» (иначе свойства «слева/справа/сверху/снизу» будут использовать свои значения по умолчанию auto, что заставит объект следовать за стандартный документооборот, представляется сразу после предыдущего объекта, короче говоря, становится относительным, что будет занимать место в документе).
Если левое/правое свойства установлены одновременно, тогда действует левое. Точно так же, когда верх и низ существуют одновременно, верх вступает в силу.
Рисунок 6: Абсолютное позиционирование
Рисунок 7: Абсолютное позиционирование
Как видно из Рис. 6 и Рис. 7, absolute позиционируется по существу относительно границы первого родительского элемента, отличного от статического позиционирования.
В то же время абсолютное позиционирование объекта за пределами видимой области вызовет появление полосы прокрутки. При размещении относительно расположенного объекта за пределами видимой области полоса прокрутки не появляется.
4. fixed
Рисунок 8: Фиксированное позиционирование
Как видно из рисунка 8, фиксированное позиционирование также выходит за рамки стандартного документооборота.В отличие от абсолютного, фиксированное смещается и позиционируется в соответствии с исходной точкой окна, что означает, что оно не будет смещаться в соответствии с прокруткой прокрутки. бар.
5. z-index
Если два родственных элемента имеют одинаковое значение этого атрибута, они будут располагаться в стопке в соответствии с порядком, в котором они расположены в HTML-документе, причем более поздний переопределяет более ранний. Следует отметить, что отношение родитель-потомок не может использоваться для установки верхнего и нижнего отношения с z-index.Дочерний элемент должен быть выше родителя.
По поводу позиционирования выше. Кроме того, вышеперечисленные экспериментыjsfiddle.net/завершено на.