CODEWITHSUNDEEP
csscss-position
brooklynsweb
brooklynsweb

Reputation: 817

CSS Position Absolute With Respect to a Parent Element Acting as Relative

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.

Example: http://jsfiddle.net/mEpgR/

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.

What am I missing?

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>

Upvotes: 14

Views: 39648

Answers (1)

Mike Brant
Mike Brant

Reputation: 71384

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.

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

Upvotes: 48

Related Questions