5

我有一些绝对定位的盒子。其中一个有嵌套的弹出窗口，比框大。我想在所有框前弹出。

设置z-index: 100框和z-index: 200弹出窗口无济于事。弹出框后按文档顺序排列的框似乎超出了弹出框。我想念 z 指数的什么？

div {
    border: 1px solid black;
}

.container {
    position: relative;
}

.foo {
    position: absolute;
    background-color: white;
    width: 5em;
    z-index: 100;
}

#b0 {
    top: 0em;
    left: 0em;
}

#b1 {
    top: 3em;
    left: 1em;
}

#b2 {
    top: 6em;
    left: 2em;
}

#b3 {
    top: 9em;
    left: 3em;
}

#b4 {
    top: 12em;
    left: 4em;
}

.popup {
    z-index: 200;
    position: absolute;
    left: 1em;
    top: -1em;
    width: 8em;
    height: 8em;
    background-color: grey;
}
<div class="container">
    <div class="foo" id="b0">
        <span>absolute box b0</span>
    </div>
    <div class="foo" id="b1">
        <span>absolute box b1</span>
        <div class="popup">
            popup box inside b1
        </div>
    </div>
    <div class="foo" id="b2">
        <span>absolute box b2</span>
    </div>
    <div class="foo" id="b3">
        <span>absolute box b3</span>
    </div>
</div>

http://jsfiddle.net/B59pR/2/

4

2 回答 2

5

您需要查看https://css-tricks.com/almanac/properties/z/z-index/以快速了解这一切。特别是在它说的部分：

另请注意，嵌套起着重要作用。如果元素 B 位于元素 A 之上，则元素 A 的子元素永远不会高于元素 B。

你在那里所做的就是从低级元素中获取子元素，并尝试让它们高于高级元素的子元素。

您需要做的就是获取 z-index 101 上的 #b1 框：

div {
    border: 1px solid black;
}

.container {
    position: relative;
}

.foo {
    position: absolute;
    background-color: white;
    width: 5em;
    z-index: 100;
}

#b0 {
    top: 0em;
    left: 0em;
}

#b1 {
    top: 3em;
    left: 1em;
}

#b2 {
    top: 6em;
    left: 2em;
}

#b3 {
    top: 5em;
    left: 3em;
}

#b1 {
    z-index: 101;
}

.popup {
    z-index: 200;
    position: absolute;
    left: 3em;
    top: -1em;
    width: 8em;
    height: 8em;
    background-color: grey;
}
<div class="container">
    <div class="foo" id="b0">
        <span>absolute box b0</span>
    </div>
    <div class="foo" id="b1">
        <span>absolute box b1</span>
        <div class="popup">
            popup box inside b1
        </div>
    </div>
    <div class="foo" id="b2">
        <span>absolute box b2</span>
    </div>
    <div class="foo" id="b3">
        <span>absolute box b3</span>
    </div>
</div>

我把这个固定在这个小提琴上，让你理解。

于 2016-06-15T13:53:11.733 回答
2

核心思想是元素以 DOM 树顺序（深度优先）递归呈现：

  1. 元素本身的背景和边框
  2. 以负 zindex 定位的孩子
  3. 非定位内容
  4. zindex 为零（或缺失）的定位子级
  5. 以正 zindex 定位的孩子

这意味着父母的树顺序优先于其孩子的 z-index。

在有问题的示例中，所有foo框都具有相等的 zindex=100 并且在步骤 3 中进行了树排序。弹出窗口的一些“叔叔”在父母之后呈现。

参考：

https://www.w3.org/TR/CSS22/visuren.html#propdef-z-index https://www.w3.org/TR/CSS22/zindex.html

于 2016-06-16T16:17:09.690 回答