Темная тема
Позиционирование
Что такое position?
position- определяет, как элемент позиционируется на странице (будет ли он на своём месте в потоке, сдвинут, зафиксирован или абсолютно размещён).
Свойства position
static
static- элемент в обычном потоке, не смешается (по умолчанию);
Например, изменим файл index.html:
html
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Static</title>
</head>
<body>
<div class="box">Я static. Нахожусь в обычном потоке.</div>
</body>
</html>Изменим файл styles.css:
css
.box {
position: static;
background: lightblue;
padding: 20px;
border: 2px solid #000;
}relative
relative- относительное позиционирование - элемент в потоке, но сдвигается;
Например, изменим файл index.html:
html
<div class="box">
Я relative. Сдвинут от исходного положения, но занимаю то же место.
</div>Изменим файл styles.css:
css
.box {
position: relative;
top: 30px;
left: 40px;
background: lightgreen;
padding: 20px;
border: 2px solid #000;
}absolute
absolute- абсолютное позиционирование - элемент не в потоке, позиционируется относительно ближайшего родителя сposition: relative / absolute / fixed;
Например, изменим файл index.html:
html
<div class="parent">
Родитель с `position: relative`
<div class="child">Я absolute. Смещён от родителя.</div>
</div>Изменим файл styles.css:
css
.parent {
position: relative;
height: 200px;
top: 30px;
border: 2px dashed #999;
}
.child {
position: absolute;
top: 60px;
right: 20px;
width: 150px;
background: salmon;
padding: 10px;
}fixed
fixed- фиксированное позиционирование - относительно окна браузера;
Например, изменим файл index.html:
html
<div class="fixed">Я fixed. Я всегда прикреплён к верху окна.</div>
<div class="content">
<p>Прокрути страницу — элемент останется на месте.</p>
<p style="height: 1000px"></p>
</div>Изменим файл styles.css:
css
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: lightblue;
color: black;
padding: 10px;
z-index: 999;
}
.content {
margin-top: 60px;
}sticky
sticky- "липкое" позиционирование - ведёт себя какrelative, но при прокручивании "прилипает" к краю;
Например, изменим файл index.html:
html
<div class="sticky">Я sticky. Прилипну к верху при прокрутке.</div>
<div class="content">Много контента... Прокручивай вниз!</div>Изменим файл styles.css:
css
.sticky {
position: sticky;
top: 0;
background: lightgreen;
padding: 20px;
border: 2px solid #333;
}
.content {
height: 1500px;
padding: 20px;
}Свойство z-index
z-index- это целое число, определяющее, кто находится выше в визуальном слое (чем больше значение, тем выше слой).
Работает только на позиционированных элементах со свойствами relative, absolute, fixed и sticky.
Например, изменим файл index.html:
html
<div class="box1">z-index: 1</div>
<div class="box2">z-index: 2</div>Изменим файл styles.css:
css
.box1 {
position: absolute;
left: 40px;
top: 40px;
width: 150px;
height: 150px;
background: lightblue;
z-index: 1;
}
.box2 {
position: absolute;
left: 80px;
top: 80px;
width: 150px;
height: 150px;
background: coral;
z-index: 2;
}