前一个覆盖的负边距元素答案

【问题标题】：Element with negative margin covered by previous one前一个覆盖的负边距元素
【发布时间】：2019-06-02 23:25:46
【问题描述】：

我正在尝试使元素位置具有负边距 - 一个元素应该覆盖前一个元素。但这有点复杂 - 负边距应该只有 #content 的子 div。请参见下面的示例。我需要有红色元素，而不是红色元素中的黄色元素和灰色元素应该有负边距并覆盖红色元素的底部。

我已经尝试过相对和绝对位置，更改 z-index，但这些都不适合我。

#sectionTitle {
height: 150px;
text-align: center;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 1;
background: red;
}
#content {
background: yellow;
position: relative;
width: 100%;
height: auto;
min-height: 300px;
overflow: auto;
z-index: 20;
}
#content .block {
position: relative;
background: #eee;
width: 90%;
top: -50px;
margin: 0 auto 0 auto;
box-sizing: border-box;
height: auto;
min-height: 400px;
z-index: 30;
}

<div id="sectionTitle">
       ...some text...
</div>

<div id="content">
    <div class="block">
        ...element which should cover bottom of #sectionTitle element
    </div>
</div>

现在，当我检查元素时，.block 变为 50px 到 #sectionTitle，但它不可见，因为 sectionTitle 元素覆盖了它。

【问题讨论】：

我已经更新了这个问题 - 我需要红色的，而不是黄色的，灰色的在黄色里面，应该覆盖红色的底部

标签： css

【解决方案1】：

只需从#content div：

#sectionTitle {
  height: 150px;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
  background: red;
}

#content {
  background: yellow;
  width: 100%;
  height: auto;
  min-height: 300px;
}

#content .block {
  position: relative;
  background: #eee;
  width: 90%;
  top: -50px;
  margin: 0 auto 0 auto;
  box-sizing: border-box;
  height: auto;
  min-height: 400px;
  z-index: 30;
}

<div id="sectionTitle">
  ...some text...
</div>

<div id="content">
  <div class="block">
    ...element which should cover bottom of #sectionTitle element
  </div>
</div>

¹Why can't an element with a z-index value cover its child?

²What formatting context applies to elements that don't create their own?

【讨论】：