8.1 Нормальный поток
Позиционирование элементов в CSS играет ключевую роль в управлении их расположением и взаимодействием на веб-странице. Оно определяет, как элементы размещаются по отношению к другим элементам и к своему контейнеру. Рассмотрим, как различные виды позиционирования влияют на поток элементов.
Поток документа и позиционирование
Элементы в нормальном потоке документа располагаются один за другим в порядке, определяемом HTML-разметкой. Блочные элементы (например, <div>, <p>, <h1>) располагаются вертикально, занимая всю ширину родительского контейнера, а строчные элементы (например, <span>, <a>, <em>) располагаются горизонтально, занимая лишь необходимое пространство.
Пример:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Блочный элемент</div>
<span class="inline">Строчный элемент</span>
<span class="inline">Строчный элемент</span>
8.2 Влияние позиционирования на поток документа
Различные типы позиционирования могут изменять стандартный поток документа. Рассмотрим, как это происходит:
Позиционирование static
Позиционирование static является значением по умолчанию и не изменяет нормальный поток документа. Элементы с position: static размещаются в порядке, определяемом HTML-разметкой.
Влияние на поток:
- Элементы остаются в нормальном потоке
- Элементы располагаются один за другим в соответствии с их порядком в HTML
Позиционирование relative
Элементы с position: relative остаются в нормальном потоке, но могут быть смещены относительно своего нормального положения с помощью свойств top, right, bottom, left. Смещение не влияет на положение других элементов.
Влияние на поток:
- Элементы остаются в нормальном потоке
- Смещение элемента не изменяет расположение соседних элементов
Позиционирование absolute
Элементы с position: absolute удаляются из нормального потока документа и размещаются относительно ближайшего позиционированного предка. Если такого предка нет, они размещаются относительно начального контейнера (обычно это <html> или <body>).
Влияние на поток:
- Элементы удаляются из нормального потока
- Позиционируются относительно ближайшего позиционированного предка
- Другие элементы ведут себя так, как будто этих элементов нет
Позиционирование fixed
Элементы с position: fixed удаляются из нормального потока и размещаются относительно окна браузера. Они остаются на месте при прокрутке страницы.
Влияние на поток:
- Элементы удаляются из нормального потока
- Позиционируются относительно окна браузера
- Остаются на месте при прокрутке страницы
- Другие элементы ведут себя так, как будто этих элементов нет
Позиционирование sticky
Элементы с position: sticky ведут себя как относительно позиционированные до тех пор, пока не достигнут заданного порога прокрутки, после чего они становятся фиксированными.
Влияние на поток:
- Элементы остаются в нормальном потоке до достижения порога прокрутки
- После достижения порога элемент фиксируется и больше не влияет на нормальный поток
8.3 Визуальные примеры влияния на поток
1. Пример с фиксированным позиционированием:
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Фиксированный элемент</div>
<div class="content">Прокручиваемый контент
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. Пример с липким позиционированием:
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Липкий элемент</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ