Как сделать бесконечный скролл страницы. Создаем веб-галерею с бесконечной прокруткой. PHP и AJAX. Что такое метод бесконечной прокрутки
Свойство position распространяется на все элементы и может иметь одно из пяти возможных значений:
- static
- relative
- absolute
- fixed
- inherit
position:static
Из раздела 9 :Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства "top ", "right ", "bottom " и "left " не применяются.этом примере :
- Второй блок отображается там же, где бы он отображался без определения position
- Значения задаваемые для top не используются, поскольку для блоков с "static" значение всех смещений всегда "auto"
- Если свойство элемента position имеет значение static , то элементу нельзя указать его расположение.
- Так как static это значение по умолчанию, то нет необходимости указывать это значение, если только оно не переопределяет другое значение позиционирования блока.
position:relative
Из раздела 9 Модель визуального форматирования :Положение блока рассчитывается в соответствии с нормальным потоком (это называется позиционированием в нормальном потоке). Затем блок смещается относительно своего нормального положения. Когда для расположения блока используется модель относительного позиционирования, то положение следующего рассчитывается так, как будто первый блок не был смещён относительно своего нормального положения.На что следует обратить внимание в этом примере :
- Блок "два" смещён ниже на 300 пикселей, но блок "три" и его содержимое остались на месте. Выглядит как будто содержимое блок "два" съехало со страницы, оставив свой след. Это выглядит так, потому что "relative" (относительное) позиционирование не нарушает нормальный поток .
- Блок с относительным позиционированием накладывается на следующие элементы и отображается перед другими блоками.
- Вычисленные значения всегда left = -right и top = -bottom. Если контейнер блока имеет значение direction равное ltr , то используется значение "left", а "right" = -left. Если direction контейнера блока имеет значение равное rtl , то используется значение "right", а "left" игнорируется.
- В отличии от "absolute" (абсолютной) модели, свойства top , right , bottom и left ни могут растянуть или сжать блок, они не могут влиять на его размер.
position:absolute
Из раздела 9 Модель визуального форматирования :Положение блока (можно и размер) указываются с помощью свойств "top" , "right" , "bottom" , и "left" . Они указывают смещение относительно содержащего блока. Абсолютно позиционируемые блоки изымаются из нормального потока и не влияют на размещение следующих элементов потока. Следует заметить, что поля блоков с абсолютным позиционированием не перекрываются ни какими другими полями.На что следует обратить внимание в этом примере :
- В связи с тем, что смещение не указано, блок "два" не перемещён относительно своей нормальной позиции, но если бы мы использовали, например: top:0;left:0; блок находился бы в левом верхнем углу окна просмотра .
- Макет отображается так, как если бы блоку "два" присвоили стиль: display:none . Блок был удалён из потока .
- С блоком "два" удалённым из поток, блок "три" переместился вслед за блоком "один" (параграфы последовали за ним).
- Как и все элементы удалённые из потока, блок "два" был сжат по горизонтали.
- Для любого элемента с позиционированием "absolute" или "fixed" вычисляемое значение display:block .
- "Содержащий блок" это блок который определяет позиционирование контекста. Оно устанавливается ближайшим предком с "position" установленной в "absolute" , "relative" или "fixed" . Это означает, что родительский блок может и не быть содержащим блоком .
- Положение по умолчанию, абсолютно позиционируемого блока, не всегда бывает в стиле top:0;left:0; (в LTR контексте), на это есть две причины:
- В содержащем блоке позиционирование блока определяется позиционированием ближайшего предка , если такового нет, то указанный контейнер является корневым элементом. Содержащий блок в котором расположен корневой элемент это прямоугольная область называемая начальным содержащим блоком. Для устройств без разбивки страниц он имеет размер области просмотра(окна или другой области просмотра на экране) и он прикреплён к странице. В этом примере показан блок позиционируемый относительно видимой области (по умолчанию, содержащий блок).
- Элемент позиционируемый относительно отступов блока, а не содержимого блока и не бордюра содержащего блока . Этот новый пример демонстрирует где находился бы блок "два" если бы границы отступа блока не касались границы содержимого блока (содержащий блок - элемент body ).
- Использование этой схемы позиционирования является плохой практикой, так как она удаляет блоки из потока.
position:fixed
Из раздела 9 Модель визуального форматирования" :Фиксированное позиционирование является под категорией абсолютного позиционирования. Разница в том, что при фиксированном положении блока, содержащий блок определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это удобно для размещения подписей внизу каждой страницы. Блоки, которые больше чем область страницы обрезаются. Части блока с фиксированным позиционированием, которые не видны в начальном содержащем блоке, не будут напечатаны.
На что следует обратить внимание в примере :
- В связи с тем, что фиксированное позиционирование является под категорией абсолютного позиционирования, то всё, что было верно для "absolute" , так же верно и для "fixed" (элемент сжимается по горизонтали, удаляется из потока и т.д.)
- Блок позиционируется относительно видимой области и не прокручивается вместе со страницей.
- В IE6, блок отображается как "static" блок , но есть "забавный" обходной путь для этого.
- При печати документа, блок "два" отобразится на каждой странице.
- Положение блока рассчитывается в соответствии с "absolute" моделью, но кроме этого блок фиксируется относительно некоторой ссылки. В случае использования следующих медиа типов: handled , projection , screen , tty и tv блок фиксируется относительно видимой области и не перемещается при прокрутке.
- Содержание блока может быть не доступным для просмотра пользователями, если оно находится за пределами видимой области.
- В случае использования медиа типа "print" , авторы могут не хотеть что бы элемент отображался на каждой странице. Тогда лучше использовать следующие правили для @media :
position:inherit
Если для блока указан position:inherit , то он будет принимать такие же вычисленные значения свойств как и его родительский блок.Обратите внимание, что IE6 и IE7 не поддерживают это значение, кроме тех случаев когда используется direction и visibility (см )
Что следует помнить:
Смещение блокаПомните, что при абсолютном и фиксированном позиционировании блоков, значения установленные в процентах для top , right , bottom и left вычисляются в соответствии с размерами содержащего блока (который может быть не родительским блоком)
"position" и "overflow"
Блок со стилем overflow:hidden будет обрезать элементы с относительным позиционированием (вложенные блоки), но никогда не будет скрывать блоки с абсолютным позиционированием. Это связано с тем, что родительский блок не всегда является содержащим блоком (ближайшего предка с "position" установленной в "absolute" , "relative" и "fixed" ).
Это означает, что элементы с абсолютным позиционирование отобразятся вне блока со стилем overflow:hidden если этот блок не является содержащим блоком или внутренним элементом указанного блока. Данный пример показывает как это работает.
Поля
Авторы могут использовать поля элементов вне зависимости от схемы их позиционирования.
В случае с IE
В IE позиционирование блока может быть благословением или проклятием:
- В IE6, position:relative (с haslayout ) могут быть использованы отрицательные поля для предотвращения обрезания блока родительским контейнером (пример демонстрирующий решение этой проблемы).
- Позиционированный элемент может "мешать" расположению блоков в IE6 и 7 и может создавать наложение содержимого (пример)
- В соответствии с последовательностью исходного кода, позиционированные блоки могут выплывать перед блоками расположенными в нормальном потоке.
- Авторы могут указывать уровень наложения через свойство "z-index" , только на позиционированные блоки.
- В IE6 и 7, просто факт позиционирования может вызывать наложение контента (пример см. выше).
Элемент с относительной позицией всегда смещён относительно своего нормального положения в потоке. Другими словами, он смещён относительно того места где был бы при нормальных обстоятельствах и его смещение не влияет на положение элементов расположенных вокруг него. Это как призрак, который покинул своё тело. Тело, которое имеет ширину, высоту и оказывает влияние на окружение, но невидимо. Призрачные блоки в могут перемещаться, но всё ещё связаны со своим телом и его позиция по прежнему измеряется от него. Теперь элемент с абсолютным позиционированием, с ним ещё проще. Он больше не влияет на своё окружение (он вырван из потока). Он как настоящий призрак без тела. Что касается, родственных элементов, то он их больше не беспокоит, как если бы его не существовало. Что бы узнать свое положение он просматривает каждого предка пока не найдёт элемент с position:relative или position:absoluter. Этот элемент будет служить точкой отсчёта. Если он не найдёт элемент с позиционированием, то будет ориентироваться относительно документа.
Для вёрстки страниц часто используются два основных инструмента — позиционирование (positioning) и свободное перемещение (floating) . CSS-позиционирование позволяет указать, где появится блок элемента, а свободное перемещение перемещает элементы к левому или правому краю блока-контейнера, позволяя остальному содержимому «обтекать» его.
Позиционирование и свободное перемещение элементов
1. Типы позиционирования
Свойство position позволяет точно задать новое местоположение блока относительно того места, где он находился бы в нормальном потоке документа. По умолчанию все элементы располагаются последовательно один за другим в том порядке, в котором они определены в структуре HTML-документа. Свойство не наследуется.
| position | |
|---|---|
| Значение: | |
| static | Значение по умолчанию, означает отсутствие позиционирования. Элементы отображаются последовательно один за другим в том порядке, в котором они определены в HTML-документе. Используется для очистки любого другого значения позиционирования. |
| relative | Относительно позиционированный элемент сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал, не исчезает. При этом такой элемент может перекрывать другое содержимое на странице.
Если для относительно позиционированного элемента одновременно задать свойства top и bottom или left и right , то в первом случае сработает только top , во втором — left . Относительное позиционирование позволяет задавать z-index для элемента, а также абсолютно позиционировать дочерние элементы внутри блока. |
| absolute | Абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно границ его блока-контейнера (другого элемента или окна браузера). Блок-контейнер для абсолютно позиционированного элемента — ближайший элемент-предок, значение свойства position которого не равно static .
Местоположение краёв элемента определяется с помощью свойств смещения. Пространство, которое занимал такой элемент, схлопывается, как будто элемента не существовало на странице. Абсолютно позиционированный элемент может перекрывать другие элементы или быть перекрытым ими (за счёт свойства z-index). Любой абсолютно позиционированный элемент генерирует блок, то есть принимает значение display: block; . |
| fixed | Фиксирует элемент в указанном месте страницы. Блоком-контейнером фиксированного элемента является окно просмотра, то есть элемент всегда фиксируется относительно окна браузера и не меняет своего положения во время прокрутки страницы. Сам элемент при этом полностью удаляется из основного потока документа и создаётся в новом потоке документа. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 1. Разница между статичным, относительным и абсолютным позиционированием
2. Свойства смещения
Свойства описывают смещение относительно ближайшей стороны блока-контейнера. Задаются для элементов, для которых значение свойства position не равно static . Могут принимать как положительные, так и отрицательные значения. Не наследуются.
Для свойства top положительные значения перемещают верхний край позиционируемого элемента ниже, а отрицательные — выше верхнего края его блока-контейнера. Для свойства left положительные значения сдвигают край позиционируемого элемента вправо, а отрицательные значения — влево. То есть, положительные значения смещают элемент внутрь блока-контейнера, а отрицательные — за его пределы.
3. Позиционирование внутри элемента
Для блока-контейнера абсолютно позиционированного элемента задаётся свойство position: relative без смещений. Это позволяет позиционировать элементы внутри элемента-контейнера.
Рис. 2. Абсолютное относительное позиционирование
4. Проблемы позиционирования
1. Если ширине или высоте абсолютно позиционированного элемента присвоено значение auto , то её значение будет определяться шириной или высотой содержимого элемента. Если ширина или высота объявлена явно, то именно это значение и будет присвоено.
2. Если внутри блока с position: absolute расположены элементы, для которых задано обтекание float , то высота этого элемента будет равна высоте самого высокого из этих элементов.
3. Для элемента с position: absolute или position: fixed нельзя одновременно устанавливать свойство float , а для элемента с position: relative — можно.
4. Если предок позиционированного элемента является блочным элементом, то блок-контейнер формируется областью содержимого, ограниченной рамкой (border). Если предок — строковый элемент, блок-контейнер формируется внешней границей его содержимого. Если предка нет, блоком-контейнером является элемент body .
5. Свободное перемещение элементов
В обычном порядке блочные элементы отображаются, начиная с верхнего края окна браузера по направлению к нижнему краю. Свойство float позволяет перемещать любой элемент, выравнивая его по левому или правому краю веб-страницы или содержащего его элемента-контейнера. При этом остальные блочные элементы будут его игнорировать, а строчные элементы будут смещаться вправо или влево, освобождая для него пространство и обтекая его.
Рис. 3. Свободное перемещение элементов
Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются. Свойство float применяется как к блочным элементам, так и к строчным элементам.
Левый или правый внешний край перемещаемого элемента, в отличие от позиционированных элементов, не может располагаться левее (или правее) внутреннего края его блока-контейнера, т.е. выходить за его границы. При этом, если для блока-контейнера заданы внутренние отступы, то плавающий блок будет отстоят от края блока-контейнера на заданное расстояние.
Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .
Свойство не оказывает никакого влияния на элементы с display: flex и display: inline-flex .
При использовании свойства float для блочных элементов обязательно задавать ширину. Тем самым браузер создаст место для другого содержимого. Но если совокупная ширина всех столбцов окажется больше доступного места, то последний элемент спустится вниз.
При этом вертикальные отступы margin обтекаемых элементов не схлопываются с отступами соседних элементов, в отличие от обычных блочных элементов.
6. Отмена обтекания элементов
6.1. Свойство clear
Свойство clear определяет, как будет располагаться элемент, идущий следом за плавающим элементом. Свойство отменяет обтекание с одной или обоих сторон элемента, установленное свойством float . Для предотвращения отображение фона или границ под плавающими элементами используется правило {overflow: hidden;} .
6.2. Очистка потока стилями при помощи класса clearfix и псевдокласса:after
Предположим, имеется блок-контейнер, для которого не заданы ширина и высота. Внутри него помещен плавающий блок с заданными размерами.
Рис. 4. «Эффект схлопывания» блока-контейнера
Решение проблемы:
Создаем класс.clearfix и в сочетании с псевдоклассом:after применяем его к блоку-контейнеру.
Второй вариант очистки потока:
Clearfix:after {
content: "";
display: table;
clear: both;
}
Рис. 5. Применение «очищающего» метода для блока-контейнера, содержащего плавающий элемент
6.3. Легкий способ очистки потока
Существует ещё один прием очистки потока для элемента, содержащего плавающие элементы, например, для маркированного горизонтального списка:
Ul { margin: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; } li { float: left; width: calc(100% / 3 - 20px); height: 50px; margin-right: 20px; background: #ffffff; border: 3px dashed #666666; } li:last-child {margin-right: 0;} Рис. 6. Очистка потока горизонтального списка
Верстка HTML - процесс длительный, скрупулезный, но весьма творческий. Несмотря на то что для большинства людей, занятых в сфере IT, верстка веб-страниц может показаться скучной рутиной, специалисты, имеющие призвание к подобному делу, не только качественно выполняют задачи, но и получают от самого процесса ощутимое удовольствие.
Однако прежде чем стать опытным верстальщиком, каждый новичок проводит уйму времени, изучая различные инструкции и спецификации как по языку HTML, так и по его союзнику - CSS. Именно о том, для чего он нужен и какие «финты ушами» позволяет вытворять, а также об одном из его популярных свойств - Position Relative - мы сегодня и поговорим.
Что такое CSS?
Аббревиатура CSS может быть расшифрована и переведена на русский язык как «каскадные таблицы стилей». Звучит довольно странно - с одной стороны, вроде и слова понятные, а с другой - общий смысл улавливается далеко не сразу. Начнем с простого - со стилей. Данная технология позволяет придавать объектам на странице определенные характеристики, касающиеся внешнего вида, которые можно прописать лишь однажды, а использовать бесконечное количество раз.
Слово «таблицы» в официальном переводе оказалось практически случайно - на самом деле уместнее здесь было бы употребление слова «листы» или «списки», тем не менее авторы первоначального перевода решили, что на таблицу CSS похож больше, чем на список, и кто мы такие, чтобы теперь их судить.
Наконец, слово «каскадные». Дело в том, что каждый элемент может иметь сразу несколько стилей, которые могут смешиваться или даже пересекаться. В подобных случаях браузеру приходится прибегать к ряду правил, дабы правильно скомпоновать внешний вид блока, у которого оказалось несколько стилей, при этом один из них, например, имеет свойство Position Relative, а другой - Position Absolute. На самом деле подобные конфликты допускать нельзя, но в крупных проектах подобная путаница происходит довольно часто.
Итак, теперь, когда с названием все понятно, давайте рассмотрим один простой пример. Допустим, на вашем сайте должно быть большое количество кнопок, оформленных определенным образом. У них есть такие свойства, как размер, тень, прозрачность, цвет. Конечно, можно указывать данные параметры, создавая каждую кнопку, но гораздо проще будет использовать CSS. На практике вам необходимо описать некий класс, в котором будут перечислены значения всех вышеупомянутых свойств, а затем, вместо длинного перечисления, в теге каждой кнопки нужно будет лишь указать имя этого класса, после чего браузер сам покрасит эти элементы в нужные цвета и придаст им должный «лоск».
Для чего нужно свойство Position?
Теперь перейдем непосредственно к свойству Position, ради которого и затевалась вся эта статья. Если вы знакомы с английским языком или обладаете неплохой интуицией, то вам уже должно быть понятно - данное свойство отвечает за расположение элемента. На самом деле так оно и есть, однако вместо того, чтобы определять конкретное место, данное свойство указывает браузеру на то, как именно следует располагать тот или иной элемент относительно соседних или же всей страницы в целом.
Какие значения может принимать свойство Position?
Наше свойство может принимать несколько разных значений, их всего пять. Вот краткое описание каждого из них:
- Position Inherit. Данное свойство позволяет скопировать данные о позиции у элемента, являющегося родительским. Например, если у вас есть div с указанным Position Relative, то вписанный в него IMG со значением inherit также получит значение Relative.
- Position Static. Данное значение придается всем элементам автоматически, если не указано какое-либо другое. Элементы вписываются в позицию по мере упоминания в коде и недоступны для различных «изысков», позволяющих менять их положение.
- Position Absolute. К этому значению свойства Position довольно часто прибегают в тех случаях, когда необходимо создать «плавающий» элемент. Обладая данным значением свойства, элемент остается «невидимым» для остальных составляющих страницы. То есть они располагаются так, словно нашего абсолютного элемента вовсе не существует. Сам же он будет всегда оставаться на месте, вне зависимости от того, как далеко была прокручена страница.
- Position Fixed. Во многом это значение похоже на предыдущее, однако, в то время как абсолютный элемент привязывается к родителю, фиксированный использует исключительно координаты верхнего левого угла экрана браузера, не обращая внимания на остальные элементы, которые ему предшествовали.
- Наконец, Position Relative. Данный тип значения позволяет располагать элемент относительно остальных, что может быть полезно при создании адаптивной разметки, называемой в простонародье «резиновой». Имея данное свойство, элемент будет «раздвигать» остальные, не теряя возможности менять свое расположение на странице.
Особенности работы с Position в различных браузерах
Не все браузеры одинаково совместимы. В то время как большинство альтернативных программ для интернет-серфинга без каких-либо заминок воспринимают значение Position абсолютно верно, «хронически особенный» Internet Explorer рассматривает данное свойство в зависимости от своей версии.
Например, используя уже «похороненный» браузер IE6, вы не сможете использовать значения Fixed и Inherit - «ослик» их попросту проигнорирует. Впрочем, несмотря на то, что с седьмой версии ситуация начала исправляться, и Fixed уже обрабатывался, до Inherit всеми любимый «браузер для скачивания других браузеров» добрался только в своей восьмой ипостаси.
Остальные же обозреватели спокойно обрабатывают Position с первых версий, за исключением Opera, которая обзавелась поддержкой данного свойства в своей 4 вариации, вышедшей в середине 90-х.
Работа с Position в Javascript
На самом деле рассказ о том, как следует работать со свойством Position в Javascript, мы включили лишь ради приличия. Так как данное свойство не обладает какими-либо спецсимволами в названии, использовать JS можно без каких-либо изменений, например, чтобы задать для div Position Relative, следует включить такую строку: div.style.position = ‘relative’.
Как видите, все довольно просто.
Почему Position Relative заслуживает особого внимания?
В то время как большая часть значений свойства Position, мягко выражаясь, «плевала» на окружающие элементы, используя значение "style position: relative", стоит всегда помнить обо всей странице в целом, ибо неправильное его использование может сильно «перекосить» все содержимое экрана.
Кроме того, только данное свойство позволяет без труда превратить фиксированный дизайн в адаптивный, ведь его применение автоматически сказывается на всем содержимом страницы. Далее мы еще успеем рассмотреть примеры и ошибки использования этого значения, и вы убедитесь в его ощутимой значимости на практике.
Когда следует использовать относительное позиционирование?
Помимо верстки обычных страниц Relative часто применяется для создания различных интересных эффектов. Например, если вы хотите, чтобы какой-либо элемент «приезжал» на страницу или же, наоборот, плавно отправлялся за ее края, то именно данное свойство может помочь вам реализовать этот «финт».
Подобные «трюки» реализуются через Javascript, либо, если вы стремитесь к прогрессивной верстке, через свойства CSS3, которые позволяют настраивать цикличное изменение значения той или иной переменной.
Кроме того, в некоторых случаях возможно создание «гибридных» значений Position Relative. CSS хоть и не позволяет одновременно задать нечто вроде position: absolute relative, но, используя некоторые хитрости, все-таки можно добиться данного эффекта. Этот подход может пригодиться в тех случаях, когда необходимо создать что-либо вроде сложной или контекстного меню. Рассматривая примеры, мы обязательно приведем описание структуры подобного «гибрида».
Примеры использования относительного позиционирования
Position Relative - это довольно простой, но гибкий инструмент, позволяющий реализовывать множество интересных эффектов. Чтобы не тратить время и место на написание бесполезных шаблонных кодов, мы приведем несколько устных алгоритмов, которые смогут украсить ваш сайт или его отдельные страницы.
Начнем с «выбегающей» строки. Предположим, у вас возникла необходимость в элементе, который будет «выезжать» из-за левого края экрана и постепенно двигаться к его правой стороне. Чтобы реализовать подобный «механизм», следует установить position: relative; left: -100px, где -100 - примерное число пикселей, составляющих ширину блока. Подобный стиль позволит вам спрятать блок за пределами экрана, установив его на «стартовую позицию». Теперь можно использовать скрипт, который будет каждые несколько миллисекунд наращивать значение свойства left на единицу до тех пор, пока оно не станет равным ширине окна браузера минус ширина элемента. В результате мы получаем блок, который появляется из-за левого края, прокатывается через весь экран и «паркуется» у его правой стороны.
Другой пример позволяет создавать «относительно-абсолютные» элементы. Например, вы можете вписать абсолютный внутрь другого, имеющего Position Relative. В результате у нас есть «относительный» блок, не имеющий размера, в который вписан абсолютный, способный теперь проявляться в позиции, зависящей от предшествующих ему элементов.
Типичные ошибки при использовании Position Relative
Наиболее распространенной ошибкой при использовании Position Relative является то, что многие верстальщики забывают о способности резервировать место под блок, который может находиться где угодно. Например, если у вас есть довольно крупный, размещенный за пределами экрана и имеющий относительное позиционирование, на его месте будет зиять «дыра». Впрочем, даже это свойство, иногда создающее определенные неудобства, можно использовать во благо, например, создавая интересный эффект «самособирающегося» сайта, в котором все его блоки постепенно помещаются на позицию top: 0; left: 0; т. е. на свое оригинальное место.
Свойство position
имеет следующие значения
static relative absolute fixed
Только совместно с ним применяются свойства (искл. position: static;)
top bottom right left
Одновременно могут присутствовать
margin transform float (искл. position: absolute; и position: fixed;)
Добавить пустой тег перед div с class="primer" - .
Введение
Элементы на веб-странице занимают определённое пространство. По аналогии с корабликами в игре "Морской бой". Между кораблями должны быть пустые клеточки - margin.
Для того, чтобы один элемент поместить поверх другого, нужно задать отрицательное значение для margin. Но тогда содержимое тегов будет накладываться друг на друга. С помощью свойств position и они как бы приподнимаются на уровень 2.
В естественном порядке нижние теги в коде показаны над верхними. Благодаря z-index на уровне 2 можно самим определить видимый элемент.
Статического позиционирование - position: static;
position: static используется по умолчанию и отменяет действие relative, absolute и fixed. Значения свойств top, bottom, right, left игнорируются. При отсутствии transform не учитывается и z-index.
Относительное позиционирование - position: relative;
Тому блоку, которому мы присвоим position: relative будет отдан приоритет. Содержимое нижнего элемента скрывается.
Для того, чтобы расположить блок Б поверх В, но ниже А, недостаточно присвоить и ему position: relative, поскольку в коде он стоит ниже блока А, а значит будет его перекрывать.
Нужно задать для элемента Б ещё и z-index меньше, чем у блока А.
Вместо margin при относительном позиционировании иногда лучше использовать свойства top, bottom, right, left. Точкой отсчёта для них является исходное положение элемента. При этом блок Б продолжает располагаться так, словно блок А находится на прежнем месте - он оставляет для него пустое пространство. Поэтому можно не колдовать с пустым div ().
Полная аналогия со свойством
Для встроенных элементов
Встроенные элементы margin не смещает вниз и вверх (). Только top, bottom
Б А Б
Абсолютное и фиксированное позиционирование
Казалось бы, что блок с position: absolute должен находиться выше position: relative, но это нет так, тут действует естественный порядок. А значит z-index позволит между ними выбрать приоритетный элемент.
Блок В игнорирует исходное положение блока Б, поскольку при position: absolute и position: fixed элемент перестаёт влиять на соседние теги ни посредством своей ширины/высоты, ни посредством float: left.
Итоговая таблица
| отличительные свойства | position: static; | position: relative; transform: translate(); | position: absolute; | position: fixed; |
| наложение | элементы лучше не помещать друг на друга | элементы имеет приоритет видимости над static. Другие значения равнозначны. Видимым будет тот, кто ниже находится в коде, либо обладает большим значением z-index | ||
| точка отсчёта top, right, bottom и left | игнорируются | исходное положение элемента | край родительского элемента | край окна браузера |
| элементы вокруг | учитывают текущее положение элемента | учитывают исходное положение элемента | игнорируют положение элемента | |
| width: 100%; это ширина | элемента (для встроенного)/родительского элемента (для блочного) | родительского элемента с position не в значении static | окна браузера | |
| при прокрутки страницы элемент | перемещается | "прилипает" к заданному месту окна браузера | ||
А теперь для закрепления материала пощёлкайте по кнопкам в начале статьи, подумайте почему произошли именно такие изменения.