Четыре значения атрибута позиции:
1.относительный
2.абсолютный
3. исправлено
4.статический
Эти четыре атрибута описаны ниже.
<div id=parent> <div id=sub1>sub1</div> <div id=sub2>sub2</div></div>1.относительный
Относительный атрибут относительно прост. Нам нужно выяснить, от какого объекта он смещен. Ответ кроется в его местоположении. В приведенном выше коде sub1 и sub2 находятся в одноуровневых отношениях. Например, если вы установили относительный атрибут sub1, установите следующий код CSS:
#sub1 {позиция: относительная; отступ: 5 пикселей сверху: 5 пикселей слева: 5 пикселей;}Мы можем понять, что если относительный атрибут не установлен, позиция sub1 должна находиться в определенной позиции в соответствии с обычным потоком документов. Но когда позиция sub1 установлена на относительную, она будет смещена в соответствии с предполагаемой позицией в соответствии со значениями верхнего, правого, нижнего и левого. В этом также отражается относительное значение относительного.
Для этого вам просто нужно запомнить, где должен находиться sub1, если вы не установили относительный, и сместить его от того места, где он должен быть после установки.
Следующий вопрос: где позиция sub2? Ответ заключается в том, где он был раньше и где он находится сейчас. Его положение не изменится, потому что sub1 добавляет атрибут позиции.
Что произойдет, если в это время позиция sub2 также будет установлена относительной? На данный момент он по-прежнему такой же, как sub1, но смещен в соответствии со своим исходным положением.
Обратите внимание, что относительное смещение основано на верхней левой части поля объекта.
2.абсолютныйЭто свойство всегда вводит в заблуждение. Говорят, что когда атрибуту позиции присвоено абсолютное значение, он всегда позиционируется в соответствии с окном браузера. На самом деле это неверно. Фактически это характеристика фиксированных атрибутов.
Когда позиция sub1 установлена на абсолютное значение, кто используется в качестве объекта для смещения? Здесь есть две ситуации:
(1) Когда родительский объект sub1 (или прадедушка, если он является родительским объектом) родительский также устанавливает атрибут позиции, а значение атрибута позиции является абсолютным или относительным, то есть это не значение по умолчанию, затем следует sub1. Этот родительский элемент используется для позиционирования.
Обратите внимание: хотя объект определен, есть некоторые детали, требующие вашего внимания, а именно, какую точку позиционирования родительского элемента мы должны использовать для его позиционирования? Если родительский элемент устанавливает такие атрибуты, как поля, границы, отступы и т. д., то эта точка позиционирования будет игнорировать отступы и будет располагаться от начала отступа (то есть только начиная с верхнего левого угла отступа). то есть, игнорируя отступы, конечно, он не будет игнорировать поля и границы.
Следующий вопрос: где находится sub2? Поскольку, когда позиция установлена в абсолютное значение, это приведет к тому, что sub1 переполнит обычный поток документов, как если бы он не принадлежал родительскому элементу, он всплывает вверх. В DreamWeaver это называется слоем, но на самом деле это означает то же самое. В это время sub2 получит позицию sub1, и его поток документов больше не будет основан на sub1, а начнется непосредственно с родителя.
(2) Если у sub1 нет родительского объекта с атрибутом позиции, то тело будет использоваться в качестве объекта позиционирования и позиционироваться в соответствии с окном браузера. Это легче понять.
3. исправленоФиксированный — это специальный абсолют, то есть фиксированный всегда использует тело в качестве объекта позиционирования и позиционируется в соответствии с окном браузера. Даже если полосу прокрутки перетащить, ее положение не изменится. Аналогично фоновому прикреплению: исправлено
Конечно, в Dreamweaver, похоже, нет поддержки.
4. статическийЗначение позиции по умолчанию. Обычно, если атрибут позиции не установлен, он будет организован в соответствии с обычным потоком документов.
Подвести итогВышеупомянутое использование позиции в HTML введено редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!