Различные значения Z-индекс

Question

я не знаю, как правильно решить эту проблему я так название не говорит почти ничего, но в любом случае проблема у меня есть в этой части кода:

https://jsfiddle.net/bnh3487n/

div { 
width: 100%; 
} 

#wrapper { 
    width: 500px; 
    height: 500px; 
    position: relative; 
} 

#one { 
    height: 200px; 
    background-color: red; 
    position: absolute; 
    z-index: -1; 
} 

#sub { 
    height: 50px; 
    background-color: green; 
    position: absolute; 
    z-index: 3; 
} 

#two { 
    height: 200px; 
    width: 300px; 
    background-color: blue; 
    margin: 0px auto; 
} 

Так можно, чтобы зеленый div находился перед синим, и чтобы он оставался дочерним элементом красного div. Я знаю, что этот z-index: 3 не работает, но у него нет идей о том, как будет действовать душа;

Answer 1

Нет, потому что z-index работает только если 2 элементы являются братьями и сестрами, а не родители и дети.

В основном #two находится в очереди перед всем #one контейнера:

0 #two 

-1 #one 

и #one содержит #sub, который не вне #one и #one все еще находится позади #two, так #sub слишком, за #two.

z-index Подумайте, как это:

   -1        0 

    /--------------------/   /--------------------/ 
    /     /|  /     /| 
/ #one  /|  / #two  /| 
/    /| /    /| 
/-2 -1 0 1 2 3--/ |  /-2 -1 0 1 2 3--/ |  Observer (o ͜L o) 
|     | |  |     | | 
|    #sub | |  |     | | 
|     | / |     | /
|     |/ |     |/
|     |/  |     |/
|--------------------|/  |--------------------|/ 

Answer 2

Простой ответ с вашим HTML/CSS: нет.

z-index имеет несколько правил:

• Вы должны установить position с z-index
• Ребенок не может отображать выше родителя, если родитель г-индекс устанавливается также. Например. Родитель имеет z-index из 2, а дочерний div имеет z-index из 3, ребенок все равно не будет отображаться над родительским (если не использовать значения минус).

Необходимо изменить структуру HTML, чтобы div были равными.

Answer 3

This article содержит пояснения относительно того, как работает z-индекс. В двух словах, z-index применяется ко всем дочерним объектам.

только решение для Вас, чтобы удалить «подменю» DIV и поместите его за пределы «один»