CODEWITHSUNDEEP
htmlcsscss-position
rnrneverdies
rnrneverdies

Reputation: 15647

Why the content overlaps?

I have looked through the chrome developer tools but do not understand why this happens. I expected to see the blocks one below the other. But I need the child has absolute positioning block to be animatable.

CURRENT RESULTS

enter image description here

CSS

.container {
    position: relative;
}

.child {
    position: absolute;
}

.sibling {
    position: static;
}

HTML

<div class="container">
    <div class="child">
        <p class="red">Lorem ipsum ...</p>        
    </div>
</div>
<div class="sibling">
    <p class="blue">Lorem ipsum ...</p>       
</div>

JSFIDDLE

Upvotes: 0

Views: 91

Answers (2)

Anonymous
Anonymous

Reputation: 10216

YES, Because when you use position: absolute; that takes your div.child element out of the document's regular flow and you've set position: relative; to your div.container but your div.container doesn't have any height (0px), that's why div.sibling overlaps the div.container.

If you set margin: 0px; to p tag then div.sibling completely overlaps the div.container - DEMO

Solution: First of All, There's no way to do it as you want using CSS. You must remove position: absolute; or set height to your div.container.

[EDITED]

div.container height is 0px on chrome developer tools.

enter image description here

Upvotes: 1

Tony Chen
Tony Chen

Reputation: 501

It is another 'BFC'（Block Formatting Context） question. when you add position:absolute or fixed to your element, the element create a BFC . the BFC don't share margin with other element.

You may search something about BFC or read w3 and this

My solution is add overflow:hidden to .sibling to make .sibling into another BFC

jsfiddle

Upvotes: 1

Related Questions