Как использовать z-индекс с относительным позиционированием?

У меня проблема с z-index и моим кодом. Я хочу иметь всплывающее окно в каждой строке, расположенной относительно этой строки. Итак, я создал этот код:

<div class="level1">
    <div class="level2">
        <input type="text" value="test1" />
        <div class="popup">test1</div>
    </div>
    <div class="level2">
        <input type="text" value="test2" />
        <div class="popup">test2</div>
    </div>
</div>

со следующим стилем

.level1
{
    position:relative;
    z-index:2;
}
.level2
{
    position:relative;   
    z-index:3;
}
.popup
{
    position:absolute;
    left:0px;
    top:10px;
    width:100px;
    height:100px;
    background:yellow;
    z-index:4;
}

Ответ 1

Когда вы устанавливаете position: relative для элемента, вы устанавливаете новый содержащий блок. Все позиционирование внутри этого блока по отношению к нему.

Установка z-индекса для элемента внутри этого блока будет изменять его только по отношению к другим элементам внутри одного и того же блока.

Я не знаю никаких обходов.

Ответ 2

Вы можете использовать z-index с положением relative. Вам просто нужно указать position: relative. Если вы действительно хотите, чтобы это выглядело так, как будто оно появляется, я предлагаю использовать box-shadow

.popup {
    position:relative;
    left: 0px;
    top: 10px;
    width: 100px;
    height: 100px;
    background:yellow;
    z-index: 4;

    -webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
}

Ответ 3

попробуйте добавить z-индекс с отрицательными значениями в обратные divs

Ответ 4

Z-Index - это порядок правил, результаты которого будут видны ТОЛЬКО при наложении двух или более элементов. Это означает, что если вы хотите, чтобы поведение z-index было таким же, как и в абсолютной позиции, вам нужно, чтобы они перекрывались. Относительное положение не заставляет их перекрываться, поэтому, например, в этом примере, чтобы перекрыть эти два деления, я должен установить вторую вершину на -50px.

  <div style="background-color: blue; width: 500px; height: 100px; position: relative">
    <div style="background-color: red; width: 50px; height: 50px; position: relative; z-index: 1;  top: 0px"></div>
    <div style="background-color: yellow; width: 50px; height: 50px; position: relative; z-index: 0; top: -50px"></div>  
  </div>