Question

请参阅以下非常简单的代码片段来说明我的问题：

#container {
  position: relative;
  padding: 20px;
  border: 2px solid gray;
}

#back {
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 0;
  right: 0;
  background-color: #bbb;
}

<div class="col-sm-12" id="container">
  <div id="back"></div>
  <h1>Some Text</h1>
</div>

HTML代码中的h1元素 {em}后面的<{em}

。

由于我不更改其back属性，因此必须为position。而且，据我所知，static元素根据页面流程定位。

那么......为什么绝对定位的static 会显示在上方<{1}}上面？

我希望在div之后看到它，因为它是第一个。

请注意，我知道如何更正这种行为，我只是在问为什么！

带纠正的片段：

h1

h1

...为什么在#container { position: relative; padding: 20px; border: 2px solid gray; } #back { position: absolute; top: 0; bottom: 50%; left: 0; right: 0; background-color: #bbb; } /* Adding the below corrects this behaviour */ h1 { position: relative; }上使用<div class="col-sm-12" id="container"> <div id="back"></div> <h1>Some Text</h1> </div>可以纠正这种行为？

Answer 1

这就是绘画顺序的工作原理。如上所述here，您有以下顺序：

对于其所有 in-flow ，按树顺序的非定位块级后代：如果元素是块，列表项或其他块   当量：

在此步骤中，您将打印h1元素

的背景和边框

否则：首先是元素，然后是所有它的in-flow ，非定位，块级后代按树顺序排列：

在此复杂步骤中，您将打印h1元素的内容

所有定位，不透明度或转换后代，按树的顺序分为以下类别：


所有定位的后代带有＆＃39; z-index：auto＆＃39;

在此步骤中，您将打印定位元素#back;因此，即使在之前的DOM中，它也会位于h1的顶部。

换句话说，我们首先考虑流入元素然后是提出的元素。当然，更改z-index和/或其他属性会影响订单，因为可以考虑更多步骤。

例如，将z-index添加到#back会触发此规则：

堆叠由z-index顺序为负z-索引（不包括0）的定位后代形成的上下文（最多为负数）然后   树顺序。

这会使#back落后，因为h1稍后会在步骤（4）和（7）中打印出来。

将position:relative（或absolute或fixed）添加到h1会使其成为定位元素，因此#back会触发（8）和在这种情况下，树顺序将决定。

您可能还会注意到背景和内容分别以两个不同的步骤打印，这也可能导致some non intuitive painting behavior。

Answer 2

试试以下内容。添加h1的样式如下

＆＃13;

#container {
  position: relative;
  padding: 20px;
  border: 2px solid gray;
}

#back {
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 0;
  right: 0;
  background-color: #bbb;
}
#container h1 {
  position : relative;
  z-index: 1;
}

＆＃13;

<div class="col-sm-12" id="container">
  <div id="back"></div>
  <h1>Some Text</h1>
</div>

＆＃13;

static elements没有z-index，但其他default to 0这就是为什么它停留在最底层的html并且非静态元素覆盖它的原因。如果您希望在上面显示它们，请将position静态元素设置为relative并提供任何positive z-index value。

Answer 3

top，right，bottom，left和z-index属性对position: static无效，h1是默认值元素，在您的情况下$(".datepicker").datetimepicker({ format: 'm/d/yyyy', datesDisabled: ['2018-06-20'], autoclose: true }); function showDate() { console.log($('.datepicker').data("datetimepicker").getDate()); }标记是。当position设置为relative时，当z-index的值不是auto时，它会创建一个新的堆栈上下文。

有关堆叠上下文的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

为什么使用绝对位置导致div位于顶部？

3 个答案: