css - CSS位置绝对相对于作为相对的父元素

Question

在我从废弃的尘埃中更新我的 CSS 技能的漫长旅程中，我一直在玩弄某些 CSS 属性——尤其是 z-index——我注意到一些奇怪的东西，或者可能存在某种情况。

示例：http: //jsfiddle.net/mEpgR/

元素 div1 的父元素是 cont，我已将 div1 的位置属性设置为绝对，但是当我移动它时，它相对于其父元素移动。我的印象是，设置为绝对定位的项目是外部常规流程，并且仅相对于浏览器端口作为其父项移动。

我错过了什么？

如果小提琴链接不起作用，代码：

CSS：

.cont {
position:relative; 
height:200px;
top:200px; 
left:100px; 
background: green; width: 200px; 
}

.div1 {
background:red; 
position:absolute; 
top:50px;
}

HTML：

<div class="cont">
<div class="div1">DIV1</div>
</div>

Answer 1

绝对定位元素相对于第一个具有非静态位置的父元素定位。由于您将它放在父级中，relative因此它将相对于该父级绝对定位。

您可能正在寻找fixed相对于浏览器窗口的位置。