相对于相对父元素的CSS位置绝对值 [英] CSS Position Absolute With Respect to a Parent Element Acting as Relative

问题描述

在我的CSS技能更新过程中，我经历了一些过时的事情，特别是z-index，我注意到一些奇怪的东西，或者可能存在某种情况

In my long journey to update my CSS skills from the deprecated dust that they have turned into, I've been playing around with certain CSS properties —particularly z-index —I'm noticing something strange or maybe there's a certain condition.

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

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

The element div1's parent is cont, I've made div1's position property set to absolute, yet when I shift it, it's moving relative to its parent. I was under the impression that items set to absolute positioning are outsider regular flow and move only relative to browser port as their parent.

我想念什么?

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

If the fiddle link does not work, code:

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>

推荐答案

绝对定位的元素相对于第一个父元素(其位置不是静态的)定位.由于您将其放置在具有 relative 的父级内部，因此它将相对于该父级绝对定位.

An absolute positioned element is positioned relative to the first parent element that has a position other than static. Since you have it inside a parent with relative it will be absolutely positioned relative to this parent.

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

You might be looking for fixed position, which is relative to browser window.

这篇关于相对于相对父元素的CSS位置绝对值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！