Why does an html element (such as a div) that has been styled with
position: relative;
top: -50px;
Still force the parent element to have the same size as if the relatively positioned element were not shifted?
Let me provide an example (live example found at http://jsbin.com/ohebi4/2/edit)
<html>
<head>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.parent{ position: relative; background-color: #000000; float: left; border: 1px solid red; }
.child1{ float: left; background-color: #888888;}
.child2{ float: left; background-color: #CCCCCC; }
.subchild{ position: relative; top: -45px; height: 30px; border: 1px solid green;}
.subchild2{ height: 30px; border: 1px solid green;}
</style>
</head>
<body>
<div style='clear: both; height: 50px;'></div>
<div class='parent'>
<div class='child1'>regular content</div>
<div class='child2'>content of child 2</div>
</div>
<div>Sample A</div>
<div style='clear: both; height: 50px;'></div>
<div class='parent'>
<div class='child1'><div class='subchild2'>subchild</div></div>
<div class='child2'>content of child 2</div>
</div>
<div>Sample B</div>
<div style='clear: both; height: 50px;'></div>
<div class='parent'>
<div class='child1'><div class='subchild'>subchild</div></div>
<div class='child2'>content of child 2</div>
</div>
<div>Sample C</div>
<div style='clear: both; height: 50px;'></div>
<div class='parent'>
<div class='child1'><span>child 1</span><div class='subchild'>subchild</div></div>
<div class='child2'>content of child 2</div>
</div>
<div>Sample D</div>
</body>
</html>
The above markup creates a page that looks like this:
Sample A: Just a couple of divs inside a parent div, with normal content and flow
Sample B: Added a subchild div, with a height of 30px. As expected, it changes the height of the parent, thus revealing the black background beneath "content of child b"
Sample C: The subchild is repositions with position:relative. Note how even though this element is shifted above everything, it still contributes to the height of the parent, thus keeping the black background revealed
Sample D: Problem in sample C excacerbated by added a span before subchild div.
The behavior in A and B I understand. What I do not understand is the behavior in C and D. If the element that makes the parent taller is repositioned such that it isn't in that space anymore ... why does it still make the parent taller?
I expect (incorrectly, obviously), that example C (and D) would look identical to A, with the addition of the green "subchild" box above it.
Can anyone explain to me why this is, and how to not have a relatively placed element affect the dimensions of the parent like this?