Свойство position

Задает позиционирование элемента в документе. Используя свойства top, right, bottom, left задается положение элемента, а свойство z-index укажет на положение элемента по оси Z

position: absolute;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

position: static;

Элемент будет расположен в обычном потоке документа. Свойства top, right, bottom, left и z-index не действуют

<style>
.example-1 {
    width: 150px;
    height: 150px;
    position: static;
    background: #51deaa;
}
</style>

<div class="example-1"></div>
position: relative;

Элемент остается в обычном потоке документа, но его можно сдвигать используя свойства top, right, bottom, left относительно его позиции в документе, а так же задавать позицию по оси Z используя z-index

<style>
.example-2 {
    width: 150px;
    height: 150px;
    background: #0057ff;
}
.example-2-item {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #f98635;
    position: relative;
}
.example-2-item.center {
    top: -5px;   
}
</style>

<div class="example-2">
    <div class="example-2-item"></div>
    <div class="example-2-item center"></div>
    <div class="example-2-item"></div>
</div>
position: absolute;

Элемент удаляется из обычного потока документа и становится выше всех других элементов обычного потока. Элемент позиционируется относительно ближайшего родителя с любым позиционированием, кроме position: static; если такого нет, то элемент позиционируется относительно документа. Положение элемента можно изменять используя свойства top, right, bottom, left и z-index. Если положение элемента не изменялось, то элемент будет расположен относительно его верхнего левого угла текущей позиции.

<style>
.example-3 {
    width: 150px;
    height: 150px;
    position: relative;
    background: #0057ff;
}
.example-3-item {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    background: #f98635;
}
</style>

<div class="example-3">
    <div class="example-3-item"></div>
</div>
position: fixed;

Элемент удаляется из обычного потока документа и становится выше всех других элементов обычного потока. Элемент будет всегда находится в зоне просмотра (viewport) браузера и позиционироваться относительно зоны просмотра. Положение элемента можно изменять используя свойства toprightbottomleft и z-index.

<style>
.example-4 {
    width: 30px;
    height: 30px;
    background: #0057ff;
    
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1000;
}
</style>

Посмотрите направо..
<div class="example-4"></div>
Посмотрите направо..
position: sticky;

Элемент остается в обычном потоке документа, а затем "прилипает" к ближайшему родителю с прокруткой и скроллится вместе с ним. В народе это называют "липким" элементом, который прилипает к верху экрана при прокрутке, когда прокрутка достигает этого элемента.

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии