Hi I'm really confused about some basics with absolute positioning.
<!DOCTYPE html>
<html>
<head>
<link href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" rel="stylesheet" type="text/css" />
<style>
#containingBlock {
position: relative;
background: green;
}
#abs {
position: absolute;
background: blue;
top: auto;
}
</style>
</head>
<body>
<div id="containingBlock">
<p>foo</p>
<div id="abs">bar</div>
</div>
</body>
</html>
With the markup arranged as above, div#abs does not overlap the foo paragraph.
I know I could make it do this by giving top a value of 0 rather than auto, but since div#containingBlock has no padding, I thought auto and 0 would do the same thing.
However, if the paragraph and div#abs are switched in the source order -to make bar come before foo -top: auto; works exactly as I expected.
Any explanations appreciated!
See Question&Answers more detail:os
