CSS位置绝对与作为相对的父元素有关

时间:2013-01-17 17:09:49

标签: css css-position

在我从他们已经变成的已弃用的灰尘中更新我的CSS技能的漫长旅程中,我一直在玩某些CSS属性 - 特别是z-index-我注意到一些奇怪的东西或者可能有一定的条件

实施例: http://jsfiddle.net/mEpgR/

元素div1的父元素是cont,我将div1的position属性设置为绝对值,但是当我移动它时,它相对于它的父元素移动。我的印象是,设置为绝对定位的项目是局外流,仅相对于浏览器端口作为其父项移动。

我错过了什么?

如果小提琴链接不起作用,请输入代码:

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>

1 个答案:

答案 0 :(得分:38)

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

您可能正在寻找fixed位置,这与浏览器窗口相关。