Значения
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) браузера и позиционироваться относительно зоны просмотра. Положение элемента можно изменять используя свойства top, right, bottom, left и 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;
Элемент остается в обычном потоке документа, а затем "прилипает" к ближайшему родителю с прокруткой и скроллится вместе с ним. В народе это называют "липким" элементом, который прилипает к верху экрана при прокрутке, когда прокрутка достигает этого элемента.