Positioning scheme is influenced to child elements

Question

Consider the following HTML markup:

<div><span></span></div>

and a stylesheet:

div {
    border: 5px solid yellow;
    position: absolute;    
    width: 200px;
    height: 200px;
    margin: 40px auto;
}

span {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: aqua;
}

It's OK. Content is displayed as I'm expected: jsFiddle.

But if I'm trying to delete position:absolute from the div, then something incomprehensible is occuring. jsFiddle after deleting absolute position of div.

Q: Why span get out from the border of parent div and div's positioning scheme is influenced to span rendering?

You should apply position: relative to parent element if you want to wrap the positioned absolute span — Vangel Tzo, Feb 03 '14 at 14:41

score 0 · Answer 1 · edited May 23 '17 at 12:21

When you use position: absolute; under a position: absolute; element, than the child element is relative to that absolute parent element.

So, since the parent is now static, and position: absolute; elements are not relative to static positions.

Inorder to have an absolute element relative to parent, use position: relative;

div {
    border: 5px solid yellow;    
    width: 200px;
    height: 200px;
    margin: 40px auto;
    position: relative;
}

For more information on CSS Positioning, read my answer here.

score 0 · Answer 2 · answered Feb 03 '14 at 14:42

0

Just change the div position to relative.

http://jsfiddle.net/z8BSs/5/

answered Feb 03 '14 at 14:42

Chris

144
1
13

My question is about another thing. I want to understand why the span element is taking all available screen place? – Feb 03 '14 at 14:49

Positioning scheme is influenced to child elements

2 Answers2