el comportamiento de top: auto; me engaña
Hola, estoy realmente confundido acerca de algunos conceptos básicos con posicionamiento absoluto.
<!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>
Con el marcado organizado como se indica arriba, div # abs no se superpone al párrafo foo.
Sé que podría lograrlo dando un valor superior de 0 en lugar de automático, pero dado que div # shownBlock no tiene relleno, pensé que automático y 0 harían lo mismo.
Sin embargo, si el párrafo y div # abs se cambian en el orden de origen -para hacer que la barra aparezca antes de foo -top: auto; funciona exactamente como esperaba.
¡Cualquier explicación apreciada!