相对定位出错根据absolute答案

【问题标题】：Relative positioning goes wrong according to absolute相对定位出错根据absolute
【发布时间】：2013-03-21 09:00:51
【问题描述】：

所以我做了JsFidle link，我对相对和绝对位置感到困扰。所以我将绝对 div 称为 top。我有一个相对长（宽）的蓝色面板，其标题正确定位 - 顶部 0px。但是当我在 div id=top 中制作第二个 div 时，它的相对定位 top=70px （70 px 是上面宽蓝色面板的大小）。听起来不错，对吧？但事实并非如此。我不知道为什么它的定位如此糟糕。它相对于 div="top" div，对吗？那么为什么它会如此跌至谷底。请帮忙。

#top {
position: absolute;
top:0;
height:420px;

#panel {
margin:auto;
position:relative;
top:0px;

#panel-pic {
position: relative;
top: 70px;
height:350px;
background-color:black;
background-position: center;
background-size:cover;
box-shadow: 1px 1px 9px black;

}

面板图片出错了！

【问题讨论】：

标签： html css position

【解决方案1】：

我认为您将两者混为一谈。 :) 父级应该是相对的，并且您要相对于它放置的所有元素都应该是绝对的。所以只需将#top 的位置更改为相对位置，将所有其他位置更改为绝对位置。

【讨论】：

so relative = 将 div 放在另一个相对 div 下，例如 top?
想象一下#div_parent 和#div_child。为了将#div_child 相对于#div_parent 移动，在您的情况下，您必须将position:relative 应用于#div_parent 并将position: absolute 应用于#div_child。
绝对的意思是“相对于最近的非静态祖先的边缘的位置”。相对是“相对于未定位时的位置”。（相对通常更有用地用于阻止元素处于静态位置）。

【解决方案2】：

#panel-pic p {下

margin-top: 175px;

应该是

margin-top: 0px;

工作示例：http://jsfiddle.net/gy3FU/7/

【讨论】：