CSS绝对定位相对于作为相对定位的父元素的表现

Question

在更新我的CSS技能的漫长道路上，我一直在玩弄某些CSS属性，特别是z-index，我注意到一些奇怪的现象，或者可能是某种条件。

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

元素div1的父元素是cont，我将div1的position属性设置为absolute，但当我移动它时，它相对于其父元素移动。我原本认为设置为绝对定位的项目会在常规流之外移动，并且只会相对于浏览器视口作为其父级移动。

我错过了什么吗？

如果fiddle链接不起作用，请查看以下代码：

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>

- brooklynsweb

---

这是正确的行为。position:absolute将定位元素相对于最近的已定位祖先元素。若要使其相对于文档定位，请从父级中删除position:relative，或将元素移出父级。 - Blazemonger

阅读此链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position - j08691

谢谢您的快速回复；已注意到CSS行为。 - brooklynsweb

Answer 1

绝对定位的元素是相对于第一个具有非静态定位属性的父元素进行定位的。由于您将其放置在具有 relative 属性的父元素中，它将相对于此父元素进行绝对定位。

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

- Mike Brant

---

这里有一个详细的图形解释，讲述如何在相对定位中使用绝对定位。原文链接为：http://css-tricks.com/absolute-positioning-inside-relative-positioning/。 - Meetai.com