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

Question

У меня есть любопытная проблема, которая оказывается трудной. У меня есть пять делений, сложенных вертикально в ячейке таблицы. Я бы хотел, чтобы четные деления складывались за средним делителем, но перед остальными с z-индексацией, чтобы стек отображался как 1-3-5 по умолчанию (и все касаются, без пробелов), с четным размещение и перемещение элементов div, не влияющих на элементы div с нечетными номерами. Однако, если я положу четные деления в средний делитель, z-индексирование четных чисел полностью игнорируется, и они появляются поверх среднего, а не под ним.

Мне нужно, чтобы все здесь располагалось относительно содержащей ячейку таблицы. Абсолютное позиционирование отправляет любой из этих элементов в места, куда они не должны идти. Также необходимы спецификации выравнивания ячеек. В конечном счете, я хочу иметь возможность расширять и сжимать четные элементы с помощью наведения мыши (javascript), не перемещая нечетные.

  <style type="text/css">
    .oddStationary {
        position:relative;
        width:100px;
        height:120px;
        z-index:1;
        border:solid red;
    }
    .evenMover {
        position:relative;
        width:100px;
        height:120px; 
        z-index:2;
        border:solid yellow;
    }
    .middleStationary {
        position:relative;
        height:300px;
        width:200px;
        z-index:3;
        border:solid orange;
        background-color:pink;
    }
</style>

<table width="600">
    <tr>
        <td valign="top" align="center">
                <div class="oddStationary"></div>
                <div class="evenMover"></div>
                <div class="middleStationary"></div>
                <div class="evenMover"></div>
                <div class="oddStationary"></div>
        </td>
    </tr>
</table>

Answer 1

Вам необходимо установить общую контрольную точку для вашего абсолютного позиционирования. По умолчанию абсолюты идут вверх по дереву HTML, пока не встретят первое «положение: относительное», которое становится новым источником. Если вы не определили его, «origin» становится тегом BODY. Вы можете установить TD как «position: относительный» или обернуть все это в DIV, который имеет «position: родственник». Это хорошее начало.

Answer 2

установите положение evenMover в абсолютное значение, а затем поместите тег evenmover внутри тега div тех элементов div, где вы этого хотите.

    <td valign="top" align="center">
            <div class="oddStationary">
            <div class="evenMover"></div></div>
            <div class="middleStationary">
            <div class="evenMover"></div></div>
            <div class="oddStationary"></div>
    </td>

Answer 3

Я не правильно понял ваш вопрос: пока это ответ на ваш вопрос, что я понимаю из этой статьи: Может быть, это полезно:

<style type="text/css">
    .oddStationary {
        position:relative;
        width:100px;
        height:120px;
        z-index:1;
        border:solid red;
    }
    .evenMover {
        position:absolute;
        width:100px;
        height:120px; 
        z-index:2;
        border:solid yellow;
    }
    .middleStationary {
        position:relative;
        height:300px;
        width:200px;
        z-index:3;
        border:solid orange;
        background-color:pink;
    }
</style>

<table width="600">
    <tr>
        <td valign="top" align="center">
                <div class="oddStationary">
                <div class="evenMover"></div></div>
                <div class="middleStationary">
                <div class="evenMover"></div></div>
                <div class="oddStationary"></div>
        </td>
    </tr>
</table>