Проблема с различными z-индексами фиксированного меню: Как наложить дочерние элементы разных родителей - PullRequest
Новая
       8

Проблема с различными z-индексами фиксированного меню: Как наложить дочерние элементы разных родителей

0 голосов
/ 11 января 2019

Этот пример не похож на меню, но должен визуализировать проблему: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      font: normal 16px/1.5 "Helvetica Neue", sans-serif;
      padding-top: 50px;
    }
    
    .menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(52, 59, 62, .9);
    }
    
    .box {
      font-size: 2.5rem;
      width: 100px;
      line-height: 100px;
      text-align: center;
    }
    
    .menu .box {
      margin: 20px auto;
    }
    
    .main {
      display: flex;
      justify-content: center;
      max-width: 600px;
      margin: 0 auto;
      border: 1px solid #ccc;
      padding: 20px 0;
    }
    
    .main .box:first-of-type {
      margin-right: 10px;
    }
    
    button {
      display: block;
      position: relative;
      z-index: 1;
      cursor: pointer;
      padding: 5px;
      margin: 50px auto;
      max-width: 150px;
      font-size: 1.1rem;
    }
    
    .green {
      background: green;
      z-index: 100;
    }
    
    .yellow {
      background: yellow;
    }
    
    .yellow_2 {
      background: yellow;
      z-index: 1000;
    }
    
    .red {
      background: red;
    }
    
    .green_2 {
      background: green;
      z-index: -100;
    }
  </style>
</head>

<body>
  <div class="menu">
    <div class="box yellow">1.1</div>
    <div class="box yellow_2">1.2</div>
  </div>

  <div class="main">
    <div class="box red">2</div>
    <div class="box green">3</div>
  </div>
  <div class="main">
    <div class="box red">4</div>
    <div class="box green_2">5</div>
  </div>

</body>

</html>

Я пытаюсь, чтобы блок 1.2 (.yellow_2) отображался перед всеми полями, но оставлял блок 1.1 (.yellow) прямо между полями 2,3,4 и 5. Поскольку родительским элементам div не назначены z-индексы, что тут может быть под вопросом? Как я могу расположить дочерние элементы внутри разных родительских элементов друг с другом?

Ответы [ 3 ]

0 голосов
/ 11 января 2019

Я пытаюсь разобраться в сложении контекста и думаю, что происходит

  • '3' находится в своем собственном контексте стека с z-index 100 (Элемент, который является дочерним элементом контейнера flex (flexbox), со значением z-index, отличным от "auto".) См. MDN
  • div.menu находится в своем собственном стековом контексте (из-за позиции: fixed) и включает в себя дочерние элементы 1.1 и 1.2 с z-index 0
  • '2', '4', '5' являются непозиционированными блоками, поэтому они отображаются под позиционированными блоками

Итак, я не думаю, что вы можете получить 1,2 выше 3 (без 1,1), потому что они находятся в разных контекстах стека. Если вы измените z-index для .menu на 101, и 1.1, и 1.2 появятся выше 3.

Надеюсь, это поможет

0 голосов
/ 11 января 2019

Хитрость заключалась в том, чтобы сохранить родительские элементы div как есть, что по умолчанию установило их в position: static, и назначить всем дочерним элементам div любое свойство position, НО position: static, чтобы значения z-index вступили в силу. Родительские z-индексы имеют приоритет, но игнорируются при назначении статического свойства позиции. Надеюсь, я правильно понял, и это кому-нибудь поможет. 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  padding-top: 50px;
}

.menu{
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 59, 62, .9);
}

.box {
  font-size: 2.5rem;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.menu .box {
  margin: 20px auto;
}

.main {
  display: flex;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px 0;
}

.main .box:first-of-type {
  margin-right: 10px;
}

button {
  display: block;
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 5px;
  margin: 50px auto;
  max-width: 150px;
  font-size: 1.1rem;
}



.yellow {
  position:fixed;
  background: yellow;
  width:10%;
    top:150px;
  left:45%;
}

.yellow_2 {
  position:fixed;
  background: yellow;
  z-index:1000;
  width:10%;
  top:0;
  left:45%;
}
.green {
  background: green;
  z-index:100;
}

.red {
  background: red;
}

.green_2 {
  background: green;
  z-index:-100;
}
</style>
</head>
<body>
<div class="menu">
    <div class="box yellow">1.1</div>
    <div class="box yellow_2">1.2</div>
</div>

<div class="main">
    <div class="box red">2</div>
    <div class="box green">3</div>
</div>
<div class="main">
    <div class="box red">4</div>
    <div class="box green_2">5</div>
</div>

</body>
</html>
0 голосов
/ 11 января 2019

Свойство z-index относится к порядку рисования элемента в этой трехмерной иллюзии браузера. По умолчанию все элементы имеют z-индекс 0, и браузер рисует в DOM-порядке. Однако z-index на самом деле дает нам детальный контроль над тем, когда элемент закрашивается. Назначая более высокий z-индекс, мы можем сделать элемент нарисованным таким образом, чтобы он был «ближе» к пользователю, а назначение более низкого (или отрицательного!) Z-индекса позволяет нам рисовать элемент ближе к холсту.

см. Статьи ниже.

https://blog.logrocket.com/how-css-works-creating-layers-with-z-index-6a20afe1550e https://css -tricks.com / альманах / свойства / г / г-индекс / https://sevenspark.com/diagnosis/z-index-submenu-hidden-behind-content

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...