0

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

rnrneverdies
  • 15,243
  • 9
  • 65
  • 95
  • What are you expecting to have happen? It's hard to suggest a fix without knowing what you're trying to do. Also note that sibling has been placed outside of the container in your code above.... – Major Productions Sep 07 '14 at 01:59

2 Answers2

1

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

Community
  • 1
  • 1
Tony Chen
  • 501
  • 4
  • 16
1

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

Anonymous
  • 10,002
  • 3
  • 23
  • 39