КодSEOБлогИное

Как располагаются элементы при position: static;

У элемента с 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 типа:

  1. 𝌆 блочные, которые на строке родителя находятся в одиночестве (у них display имеет такие значения, как block, list-item, table, flex, grid),
  2. 𝍖 строчные, которых на строке родителя может быть несколько (у них 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>

Строчные элементы показаны над блочными.


navy
blue
dodgerblue
<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] показаны над элементами без них.


navy
blue
dodgerblue
<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>
◄▲►
Все комментарии