html - 相对位置和绝对位置

我有相对位置的DIV容器，绝对位置的孩子。
这是我的代码来源：

JSFIDDLE

HTML：

<div class="wrapper">
    <h1>Hello</h1>
</div>

的CSS

.wrapper {
    background: red;
    width: 100px;
    height: 100px;
    position: relative;
}

.wrapper h1 {
    color: #333;
    position: absolute;
    top: 60px;
}

当我放到顶部60px时，子元素会跳到底部，通常容器具有相对位置，因此子元素应位于容器下方而不是容器上方。

拜托，有人可以解释我为什么会这样吗？
我希望我能很好地解释我的问题。

最佳答案

当元素带有position: absolute时，该元素相对于其最接近的父级放置。定位元素是position与static不同的任何元素，可以是relative，absolute或fixed。

在您的情况下，您有一个带有.wrapper的position: relative以及一个带有h1的position: absolute，这就是为什么后者位于距其父对象顶部60像素处的原因。

如果您坚持认为子元素位于父元素之下，请在其中添加z-index: -1-http://jsfiddle.net/jt92sedr/4/
此属性仅适用于定位的元素。

您可以检查：http://www.barelyfitz.com/screencast/html-training/css/positioning/

关于html - 相对位置和绝对位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25273991/