0 
.main-column h2 {
    padding-top: 110px;
    padding-bottom: 110px;
    background: url('someimagehere.png') no-repeat center top;
    margin: 0 auto;
    position: relative; /*so that the image stays on top.*/
}

.text-column {
    width: 215px;
    background-color: yellow;
    margin-top: -120px; /*so that it enters inside the h2*/
    padding-top: 120px;
    margin-left: auto;
    margin-right: auto;
}

<div class="main-column">
 <h2>Hello tittle 1</h2>
  <div class="text-column">
   <p>I'm on column 1 and I like it</p>
   <p>I'm on column 1 as well</p>
  </div>
</div>

This works, but I don't get it.

Why does given "position: relative" to the h2, will place the background image there visible, on top of the other element yellow background color?

Again, this code works. I'm just asking for help on understanding the behavior.

Please advice

4

3 回答 3

2

使用 position:relative 或 position:absolute 或 position:fixed 还允许您使用 z-index 值来确定堆叠顺序。

如果你在 h2 上设置 z-index:-1 它应该把它推回到其他元素的后面。或者，您可以在另一个元素上设置 position:relative 并在其上设置更高的 z-index。

于 2013-07-31T09:36:49.210 回答
1

没有 z-index 的堆叠

当没有元素具有 z-index 时，元素按以下顺序堆叠（从下到上）：

  • 根元素的背景和边框
  • 正常流程中的后代块，按出现顺序（在 HTML 中）
  • 后代定位元素，按出现顺序（在 HTML 中）

在 MDN阅读全文（以及其他六篇解释 Z-Index 的文章）。

通过启用 WebGL，您还可以查看 3D 页面进行调试：
使用FireFox，按CTRL SHIFT K，然后单击右侧的 Cube 图标以查看 3D 页面。然后用鼠标单击并拖动以旋转并检查 z 轴上发生的情况。

于 2013-07-31T09:53:41.100 回答
0

当你把一个元素放在一个元素上时，position:relative;它会超过其他元素，如果你想让它留在后台，z-index: -1;请在你的 H2 上使用

于 2013-07-31T09:37:25.740 回答