o comportamento de top: auto; me engana

Question

Mar 23, 2011, 01:57 AM

o comportamento de top: auto; me engana

Oi, estou realmente confuso sobre algumas noções básicas com posicionamento absolut

<!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>

Com a marcação organizada como acima, div # abs não se sobrepõe ao parágrafo anterio

Eu sei que eu poderia fazer isso dando ao topo um valor de 0 em vez de automático, mas como div # contendo o bloco não tem preenchimento, pensei que auto e 0 fariam a mesma cois

No entanto, se o parágrafo e a div # abs forem alterados na ordem de origem, para que a barra venha antes de foo -top: auto; funciona exatamente como eu esperava.

Quaisquer explicações apreciadas!