I'm trying to understand css, so I tried my best to make my experimental code below as generic as possible.
I have a simple page, with two boxes, I wanted one of the boxes to be positioned a certain way which according to Why does setting the `right` CSS attribute push an element to the left? requires me to set its position like so position:absolute However, I now want to add some divs which fall below my absolute div, furthermore I would like the parent div to expand to fit the size of the child divs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#outer {
position : relative;
background-color : green;
width : 500px;
height : 500px;
/* overflow : hidden; */
/* I know from working with floating elements inside divs that this works
* to cause parent divs to exand out around floating children, but this
* does not do the same thing here, it lops off the bottom of the child divs
* if I un-comment the preceding line!
*/
}
#inner {
position : absolute;
background-color : blue;
height : 400px;
width : 400px;
top : 10px;
right : 20px;
}
#top_object {
position : absolute;
top : 450px;
}
.object {
position : relative;
width : 450px;
height : 200px;
background-color : yellow;
margin-bottom : 25px;
}
/* The followsing was suggested by:
https://stackoverflow.com/questions/1709442/make-divs-height-expand-with-its-content
But has no effect!
*/
.clear {
clear : both;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
<div id="top_object" class="object">
Top Object
</div>
<div class="object">
Second Object
</div>
<div class="clear"></div>
</div>
</body>
</html>
I would like to have my first div with class object and id top_object positioned at an absolute distance from the top like it appears. However, I would then like further object divs to flow below top object. In other words I want to use top_object to define an absolute position for the first instance of div with class object and then have the following divs with class object naturally flow down the page, with a 25px margin as set in margin:25px; of .object, following top_object without the need to set each object's top:XXXpx; attribute separately.
My first question is why does my second object appear above my first object, and how can I cause relative positioned objects to flow below an absolute positioned object?
Second how do I get background div to expand and around the children divs when floating divs are not used?
Furthermore, I am working to understand what is happening, although a direct answer to my question would be appreciated I would like to hear an explanation as to why what I am doing is wrong, and why any solution would fix it. I want to understand the logic behind css, not so much to see a specific code snippet which fixes the issue, although that would be nice too!
position: absolute; takes that object completely out of the document flow. So it's going to appear exactly where you tell it to be with your top: 450px and right or left selectors. That positioning won't effect any other element of your page (unless you cover up another object which will definitely happen without z-index) If you want everything to be placed below #top_object then you need to just float it right or left and then give it whatever margin you need to position it.
Also, overflow: hidden will cut off anything that is outside the defined width or height so you need to define min-width and min-height and then use overflow: auto instead of hidden.
来源：https://stackoverflow.com/questions/10092861/how-to-place-a-relative-element-after-an-absolute-element-and-cause-parent-div-t