Question

给出以下HTML和CSS：

HTML示例

<div class="fixed-sibling">
    <div class="upper-child"> /* Display ontop of .relative-sibling */ </div>
    <div class="lower-child"> /* Display under .relative-sibling */    </div>
</div>

<div class="relative-sibling">
    /* Display ontop of lower-child but under upper-child */
</div>

CSS示例：

.fixed-sibling {
    position: fixed;
    z-index: 999;
}

.relative-sibling {
    position: relative;
    z-index: 1000;
}


/*

    .upper-child {
        z-index: 1001;
    }

    .lower-child {
        z-index: 999;
    }

*/

有没有办法在.relative-sibling的{{1}}上面显示.lower-child？{/ 1}}？

在CSS示例中，我列出了两个类，其基本行为是.upper-child位于.relative-sibling之上。

现在我已经为.fixed-sibling制作了一些课程，以说明我想要完成的任务。

这不起作用，我猜它是因为无论我给它们什么z-index值，它总是相对于它的父亲。这意味着他们真正的z-index是 999＆gt; 999/1001 ，而upper- and lower-child z-index仍高于他们 1000＆gt;

我尝试使用绝对和修复定位.relative-sibling's，但它们似乎仍然相对于其父级具有z-index，意味着upper- and lower-child将始终位于两者之上。

但是，对孩子使用绝对和固定位置对我来说不是一个有效的解决方案，即使它正常工作。

有没有办法在不改变太多HTML标记的情况下实现这一目标？ - 我甚至可能会尝试使用javascript解决方案，如果有任何东西可以解决这个问题。

z-index与兄弟姐妹和儿童div

0 个答案: