У элемента с position: static;
(значение по умолчанию) игнорируются свойства top
, right
, bottom
, left
. Его можно сдвигать и накладывать на другие элементы с помощью свойств margin
, float
, transform
, grid-row
и grid-column
. Размещение элемента над другими элементами поменять не удастся, если элемент не позиционирован с помощью иных нежели position
свойств, так как игнорируется свойство z-index
.
Свойству position
задаётся значение static
, когда нужно отменить значения relative
, absolute
, fixed
или sticky
.
Нормальный поток в HTML
Нормальный HTML поток — это порядок следования HTML элементов, который не изменён CSS.
Вложенные элементы
Элементы с более высоким уровнем вложенности в коде показаны над элементами с более низким. Иначе говоря, дочерний элемент находится над родителем, или, по-другому, потомок находится над предком.
<style> div { padding: 1em; background: navy; } div div { background: blue; } div div div { background: dodgerblue; } </style> <div> <div> <div></div> </div> </div>
Соседние элементы
Нижние в коде элементы следуют после верхних сверху вниз и при direction: ltr;
(значение по умолчанию) слева направо.
Элементы условно делятся на 2 типа:
- 𝌆 блочные, которые на строке родителя находятся в одиночестве (у них
display
имеет такие значения, какblock
,list-item
,table
,flex
,grid
), - 𝍖 строчные, которых на строке родителя может быть несколько (у них
display
имеет такие значения, какinline
,inline-block
,inline-table
,inline-flex
,inline-grid
).
Нижние в коде однотипные элементы показаны над верхними [w3.org].
<style> div { height: 2em; color: white; } div:nth-child(1) { background: navy; } div:nth-child(2) { margin: 0; background: blue; } div:nth-child(3) { background: dodgerblue; } </style> <div></div> <div></div> <div></div>
navy blue dodgerblue lightblue lightblue lightblue lightblue lightblue lightblue lightblue lightblue lightblue lightblue lightblue lightblue lightblue lightblue
<style> span { color: white; } span:nth-child(1) { background: navy; } span:nth-child(2) { margin: 0; background: blue; } span:nth-child(3) { background: dodgerblue; } </style> <span>navy</span> <span>blue</span> <span>dodgerblue</span>
Строчные элементы показаны над блочными.
<style> div { height: 2em; color: white; } div:nth-child(1) { display: inline-block; background: navy; } div:nth-child(2) { margin: 0; background: blue; } div:nth-child(3) { display: inline-block; background: dodgerblue; } </style> <div>navy</div> <div>blue</div> <div>dodgerblue</div>
Элементы со значениями свойств, формирующих контекст наложения, [mozilla.org] показаны над элементами без них.
<style> div { height: 2em; color: white; } div:nth-child(1) { display: inline-block; background: navy; } div:nth-child(2) { margin: 0; opacity: .9; background: blue; } div:nth-child(3) { display: inline-block; background: dodgerblue; } </style> <div>navy</div> <div>blue</div> <div>dodgerblue</div>