1. Четыре значения position: static, relative, absolute, fixed.
Абсолютное позиционирование: absolute и fixed вместе называются абсолютным позиционированием
Относительное позиционирование: relative
Значение по умолчанию: static
2. Разница между относительным и абсолютным позиционированием
Пример:
HTML-код:
Код CSS:
Исходный эффект:
1. relative: смещается относительно исходного положения. После установки этого свойства элемент по-прежнему остаётся в потоке документа и не влияет на расположение других элементов.
Установите relative для второго блока:
Элемент смещается относительно своего исходного положения, ширина и высота остаются неизменными, и он растягивает контейнер.
2. absolute: элемент выйдет из потока документа. Если задано смещение, это повлияет на позиционирование других элементов
Установите absolute только для пятого блока:
Объяснение: когда у элемента не задана ширина, его ширина определяется содержимым внутри элемента, и эффект такой же, как при использовании метода float.
Анализ принципа позиционирования absolute:
1. Если у родительского элемента не задано relative- или absolute-позиционирование, элемент позиционируется относительно корневого элемента (т. е. элемента html) (это означает, что родительский элемент его не задал).
Теперь задайте для box5 значение смещения, чтобы проверить:
2. Если у родительского элемента задано relative- или absolute-позиционирование, элемент будет позиционироваться относительно ближайшего родительского элемента, у которого задано relative- или absolute-позиционирование (точнее, относительно ближайшего родительского элемента, который не является static, потому что по умолчанию элемент имеет static).
Дополнение: некоторые люди в интернете объясняют, что элемент будет позиционироваться относительно первого родительского элемента, который не является static. Я считаю, что это может легко вызвать недоразумение. Выше приведено моё собственное определение.
Теперь задайте элементу body absolute-позиционирование (элемент body установлен в absolute, ширина всего контейнера определяется самым длинным div, поэтому ширина становится меньше):
В этот момент box5 позиционируется относительно элемента body
Я объединил два изображения выше — то, которое позиционировано относительно элемента html, и то, которое позиционировано относительно body. Из сравнения видно, что на нижнем изображении box5, позиционированный относительно body, находится дальше от текста box1. Следовательно, когда ни у одного родительского элемента не задано relative- или absolute-позиционирование, элемент с заданным absolute будет позиционироваться относительно корневого элемента html.
Код CSS:
Теперь снова проверим это утверждение:Когда у родительского элемента задано относительное или абсолютное позиционирование, элемент будет позиционироваться относительно ближайшего родительского элемента, у которого задано относительное или абсолютное позиционирование
Теперь обернём коробки в три родительских контейнера следующим образом:
HTML-код:
CSS-стили трёх родительских контейнеров выглядят следующим образом:
Текущий вид. Теперь box5 позиционируется не относительно первого элемента, который не является static, как было сказано (согласно этому утверждению, мой box5 теперь должен быть смещён относительно самого внешнего контейнера 1), а относительно ближайшего родительского элемента, у которого задано относительное или абсолютное позиционирование:
Теперь закомментируем position у второго контейнера и третьего контейнера (без position установка значений top, left, bottom, right не даёт эффекта), результат следующий:
Теперь единственный внешний родительский элемент box5, у которого задано relative или absolute, — это самый внешний контейнер 1, поэтому box5 теперь позиционируется относительно самого внешнего контейнера 1. (Очевидно, box5 сместился)
Теперь закомментируем только position у третьего контейнера
Принцип тот же. Теперь он позиционируется относительно второго контейнера (top: 50px, ближайшего родительского элемента, у которого задано относительное или абсолютное позиционирование):
У обоих контейнеров выше — второго и третьего — задано относительное позиционирование. Теперь изменим его на абсолютное позиционирование:
Код CSS:
Принцип тот же, что и при задании для второго и третьего контейнеров relative, за исключением того, что после задания им absolute третий контейнер покидает документ вместе со своим содержимым, поэтому он не растягивает ширину двух внешних контейнеров
Текущий эффект:
Добавим ещё один контейнер снаружи, чтобы проверить эффект того, что первый и второй слои выше не были растянуты
Ширина ограничена шириной родительского контейнера на верхнем слое. Теперь расширим контейнер первого слоя, и второй и третий слои расширятся соответственно, эффект следующий:
Но если внутри контейнера есть длинный div, контейнер всё равно может быть растянут, эффект следующий:
Дополнение:
После того как для box2 задано абсолютное позиционирование, он выходит из потока документа, box3 перемещается вверх, а левая сторона перекрывается box2.
На основе вышесказанного зададим для box3 absolute. box3 выходит из потока документа (как будто box3 всплыл вверх, плавая над box2), box4 перемещается вверх, box3 перекрывает box2 и часть box4.
Аналогично, если для box4 задать абсолютное позиционирование, он всплывёт вверх и перекроет box3 и box2.
Итог
relative: позиционирование происходит относительно собственного положения элемента(При задании смещения он будет смещаться относительно своего собственного положения). Элемент с установленным relative по-прежнему остаётся в потоке документа, ширина и высота элемента остаются неизменными, а установка смещения не влияет на положение других элементов. Когда внешний контейнер имеет позиционирование relative, без задания ширины его ширина равна всей ширине браузера.
absolute: позиционирование определяется относительно ближайшего родительского элемента, у которого задано absolute или relative позиционирование. Если ни у одного родительского элемента не задано absolute или relative позиционирование, элемент позиционируется относительно корневого элемента, то есть элемента htmlЭлемент с заданным absolute выходит из потока документа. Если у элемента не задана ширина, его ширина определяется содержимым внутри элемента. После выхода исходная позиция становится как бы пустой, и элементы ниже займут это место.
Исходная ссылка: http://www.cnblogs.com/yy95/p/5672440.html