Question

我试图理解z-index背后的规则以及它如何与溢出属性交互。

我有这个HTML：

<body>
  <div class="cell">
    Here is some text to keep things interesting
    <div class="boxy"></div>
  </div>
</body>

这个css：

.boxy {
  position: absolute;
  z-index: 9999;
  top:70px;
  width: 50px;
  height: 50px;
  background: #0FF;
}

.cell {
  border: 2px solid #F00;
  position: relative;

  /* comment these two lines out and the box appears */
  /* or change them both to 'visible' */
  /* changing only one of them to 'visible' does not work */
  overflow-y: auto;
  overflow-x: auto;
}

我原本预计青色方框会出现，即使它超出div.cell的大小，因为它的z-index及其位置都已设置。

然而，出现青色框的唯一方法是注释掉overflow-x和-y线。

我的问题是：如何在保持溢出为隐藏或自动的同时使青色框出现在屏幕上？但更重要的是，我希望了解为什么这种情况正在发生。这里应用的css和布局规则是什么？

See my Plunkr.这个例子当然是我实际使用的HTML / CSS的简化版本。

修改下面的答案中似乎有些混乱，因为我没有足够好地解释事情。如果您将两条溢出线注释掉，则可以看到出现青色框。它出现在.cell的边界之外。为什么会这样？如何在显示青色框时仍然隐藏溢出和z-index？

Answer 1

青色框仅在overflow-x和overflow-y可见时出现，否则消失的原因仅仅是因为青色框溢出了单元格框。 overflow: visible只是意味着＆＃34;绘制此框，即使它溢出其包含块＆＃34; - 单元格框是青色框的包含块，因为它的position是相对的。 overflow的任何其他值都会导致从视图中剪切溢出的内容。这里没什么特别的;特别是，z-index完全不相关，并且没有问题标题所暗示的那种交互（并且除非你担心将脚本注入其他元素，否则没有理由将它设置为如此庞大的数字细胞）。

在单元格具有不可见溢出时允许青色框出现的唯一方法是从单元格中删除position: relative并将该声明应用于单元格的父级（在您的示例中，它＆＃ 39;身体）。像这样：

＆＃13;

body {
  position: relative;
}

.boxy {
  position: absolute;
  z-index: 9999;
  top: 70px;
  width: 50px;
  height: 50px;
  background: #0FF;
}

.cell {
  border: 2px solid #F00;
  overflow: auto;
}

＆＃13;

<div class="cell">
  Here is some text to keep things interesting
  <div class="boxy"></div>
</div>

＆＃13;

Answer 2

绝对定位的元素对父母的维度没有贡献。

因此，.cell DIV没有影响其尺寸的内容，使其100％宽，0px高。

要使元素显示，您必须添加一个包含DIV的.cell高度，在这种情况下为120px（70px顶部+ 50px高度）。

Answer 3

父类单元格需要设置它的高度。因为# When creating the forms and passing them to the template PlayerPickForm(prefix=str(game.pk)+'-') # When verifying posted data PlayerPickForm(request.POST, prefix=str(game.pk)+'-')元素的高度不会影响它;是父元素。

absolute

Answer 4

您的问题

您的问题与在cell节点上指定boxy时隐藏overflow的{{1}}节点有关。

原因

背后的原因是cell位置绝对不会导致boxy的{{1}}和height隐藏它。

为什么没有溢出显示？

默认情况下，cell为overflow，对于浏览器，不会对溢出功能执行任何特殊操作，并且不需要渲染overflow =＆gt;不隐藏overflow。

为什么溢出与z-index交互？

4 个答案: