Question

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

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时，子元素跳转到底部，通常容器具有相对位置，因此子元素应位于容器下方而不是容器上方。

请有人能解释一下为什么会这样吗？我希望我解释一下，我的问题。

Answer 1

CSS实际上正在按照你的想法（有点），但也有（在Firefox中，至少）一个21像素的上边距，将“文本”向下推得更远。

添加规则以删除上边距：

.wrapper h1 {
    color: #333;
    position: absolute;
    margin-top: 0; /* added this */
    top: 60px;
}

Answer 2

尝试添加“margin：0;到h1元素：

.wrapper h1 {
color: #333;
position: absolute;
top: 60px;
margin:0;
display:block;}

Answer 3

当您拥有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/

Answer 4

相反，相对总是相对于父母而言。如果您希望将子项设置为与父项相关，则将其设为相对。

你父母的亲属并不意味着什么。

Answer 5

您是否想知道为什么来自div顶部的60px看起来像80px或90像素？如果这是你的问题，答案很简单。浏览器为h1，div和body元素添加了一些余量。只需清除效果：

body, div, h1 {
    margin: 0;
    padding: 0;
}

http://jsfiddle.net/14sLb8jg/

Answer 6

现代浏览器，如Chrome和Firefox，在h1标签的顶部和底部都放置了0.67em的边距。

在你的情况下，为.wrapper h1声明一个余量为0将解决你的问题。

您的代码应为：

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

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

如果您有疑问，请使用浏览器的检查/开发人员工具找出浏览器为任何给定元素提供的默认样式，以便您知道需要覆盖哪一个。

Jsfiddle示例

View on Jsfiddle

位置相对和绝对

6 个答案:

Jsfiddle示例