相对位置和绝对位置答案

【问题标题】：Position relative and absolute相对位置和绝对位置
【发布时间】：2014-10-06 02:16:02
【问题描述】：

我有具有相对位置的 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 时，子元素跳到底部，通常容器有一个相对位置，所以子元素应该在容器下方而不是容器上方。

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

【问题讨论】：

“应该在”——我们说的是哪个维度？
css-tricks.com/absolute-positioning-inside-relative-positioning
top: 60px 表示它在父级顶部下方的60px。如果您希望它位于父级底部下方的60px，请使用bottom: -60px。
总是包含一个规范化/重置 css！

标签： html css

【解决方案1】：

当您有一个带有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/

【讨论】：

相对定位的元素相对于其正常位置进行定位。绝对定位的元素是相对于第一个具有绝对或相对定位的父容器。在您的情况下，将 position: absolute 和 top: 60px 放置到子元素会将其从相对定位的父元素的顶部移动 60px。这里有一篇很棒的文章kolosek.com/css-position-relative-vs-position-absolute 详细解释了相对位置和绝对位置。

【解决方案2】：

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

添加移除上边距的规则：

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

【讨论】：

但如果我将顶部设置为 100px ：jsfiddle.net/jt92sedr/5 仍然无法正常工作
绝对定位是相对于最近定位的父对象。那么，您到底想完成什么？

【解决方案3】：

尝试将 "margin:0; 添加到 h1 元素：

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

【讨论】：

【解决方案4】：

反过来说，Relative 总是意味着相对于父级。如果你想让孩子相对于父母，那么让它相对。

在你的情况下，父母的亲戚没有任何意义。

【讨论】：

【解决方案5】：

你想知道为什么 div 顶部的 60 像素看起来像 80 像素或 90 像素吗？如果这是您的问题，答案很简单。浏览器为 h1、div 和 body 元素添加了一些边距。简单地清除这种效果：

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

http://jsfiddle.net/14sLb8jg/

【讨论】：

【解决方案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

【讨论】：