Скриншот AtoZ CSS: свойство CSS Z-index

Возвращаясь к предыдущему примеру, у нас есть три элемента, расположенные друг над другом, но в настоящее время они не имеют значения z-index

Свойство z-index

Если я установлю z-index: 1footerz-index: 2mainz-index: 3header

Это выглядит довольно просто на поверхности; чем выше z-indexz-index: 9999z-index: 9 К сожалению, это немного сложнее, чем это.

z-index

 <header class="site-header blue">header</header> 
<main class="site-content green">content 
  <div class="box yellow"></div> 
</main> 
<footer class="site-footer pink">footer</footer>

Если я добавлю коробку внутри контейнера с site-content

 .box {
  position: absolute;
  bottom: -25px;
  right: -25px;
  z-index: 4; /* won't work 🙁 */
  width: 75px; 
  height: 75px; 
  border: 1px solid #000;
}
.site-header {top: 0; left: 0; z-index: -1;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px; z-index: 3;}

Основываясь на наших знаниях о z-indexz-index

Если я установлю z-index: 4z-index: 3 Обычно люди пытаются форсировать стэкинг, выполняя огромное количество, например 9999 Наблюдение за значениями z-index

Причина, по которой мы не можем получить желаемый результат в виде желтого прямоугольника поверх розового прямоугольника, связана с тем, как z-index

Чтобы продемонстрировать это, давайте рассмотрим несколько более сложный пример, который я позаимствовал на сайте MDN .

 <header class="site-header blue"> 
  <h1>Header</h1> 
  <code>position: relative;<br/> 
  z-index: 5;</code> 
</header> 

<main class="site-content pink"> 
  <div class="box1 yellow"> 
    <h1>Content box 1</h1> 
    <code>position: relative;<br/> 
    z-index: 6;</code> 
  </div> 

  <h1>Main content</h1> 
    <code>position: absolute;<br/> 
    z-index: 4;</code> 

  <div class="box2 yellow"> 
    <h1>Content box 2</h1> 
    <code>position: relative;<br/> 
    z-index: 1;</code> 
  </div> 

  <div class="box3 yellow">
    <h1>Content box 3</h1> 
    <code>position: absolute;<br/> 
    z-index: 3;</code> 
  </div> 
</main> 

<footer class="site-footer green"> 
  <h1>Footer</h1> 
  <code>position: relative;<br/> 
  z-index: 2;</code> 
</footer>

 .blue   {background: hsla(190,81%,67%,0.8); color: #1c1c1c;}
.purple {background: hsla(261,100%,75%,0.8);}
.green  {background: hsla(84,76%,53%,0.8); color: #1c1c1c;}
.yellow {background: hsla(61,59%,66%,0.8); color: #1c1c1c;}
.pink   {background: hsla(329,58%,52%,0.8);}

header, footer, main, div {
  position: relative;
  border: 1px dashed #000;
}
h1 {
  font: inherit;
  font-weight: bold;
}
.site-header, .site-footer {
  padding: 10px;
}
.site-header {
  z-index: 5;
  top: -30px;
  margin-bottom: 210px;
}
.site-footer {
  z-index: 2;
}
.site-content {
  z-index: 4;
  opacity: 1;
  position: absolute;
  top: 40px;
  left: 180px;
  width: 330px;
  padding: 40px 20px 20px;
}
.box1 {
  z-index: 6;
  margin-bottom: 15px;
  padding: 25px 10px 5px;
}
.box2 {
  z-index: 1;
  width: 400px;
  margin-top: 15px;
  padding: 5px 10px;
}
.box3 {
  z-index: 3;
  position: absolute;
  top: 20px;
  left: 180px;
  width: 150px;
  height: 250px;
  padding-top: 125px;
  text-align: center;
}

Здесь у нас есть headerfootermaincontentsite-contentz-index

Давайте сначала рассмотрим три основных контейнера — headerfootermain

headerz-indexmaincontentz index: 4 footerz-indexmainz-index Хорошо.

Вещи становятся немного запутанными с тремя коробками внутри main