Поведение top: auto; бамбук меня

Привет Я действительно смущен некоторыми основами с абсолютным позиционированием.

<!DOCTYPE html>
<html>
<head>    
<link href="#" onclick="location.href='http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css'; return false;" 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>

С разметкой, расположенной выше, div # abs не перекрывает параграф foo.

Я знаю, что могу сделать это, указав верхнее значение 0, а не auto, но поскольку div #, содержащий Block, не имеет прописных букв, я думал, что auto и 0 будут делать то же самое.

Однако, если абзац абзаца и div # abs переключаются в порядке источника - для того, чтобы сделать бар перед foo -top: auto; работает точно так, как я ожидал.

Любые объяснения оценены!

Ответ 1

Вы не позиционировали эти элементы, вы только что указали, какой тип позиционирования вы хотите использовать. В этом случае значение auto на самом деле ничего не делает, потому что элемент #abs помещается прямо там, где он обычно будет. Если вы удалите сегмент top: auto;, это не повлияет на элемент.

"bar" не перекрывает "foo", потому что вы не позиционировали его для этого. Он содержится в элементе #containingBlock и помещается под блочным элементом <p>, потому что "foo" занимает дискретный объем пространства. Вы хотите переопределить это? Установите top или другие соответствующие значения позиции. Чтобы повторить то, что говорили другие, top:auto просто позиционирует верхнюю часть этого элемента как можно выше, чем позволяет номер (что и требовалось сделать элементу).

Для справки в будущем значение auto используется, когда родительское свойство CSS переопределяет стиль дочернего элемента. Например, допустим, у вас был более сложный код, в котором было правило применять маржу к каждому div в #conceptBlock. Если вы хотите изменить это до нормального значения, вы включили бы margin:auto; в свой CSS с CSS.

Ответ 2

Когда вы устанавливаете абсолютное положение (относительное и т.д.) и не указываете новую позицию для элемента, оно будет помещено туда, где оно обычно будет оставаться, если не было положения: абсолютное.

Настройка автоматического значения - это не указание верхнего положения, и поэтому оно помещается под абзацем, где оно обычно остается, если не было применено специальное позиционирование.

Ответ 3

это легко (J/K!), auto и 0 - это не одно и то же. Я имею в виду, что большинство раз они

auto - это когда агент визуализации (браузер) пытается решить, что вы имеете в виду. в случае # 1 над агентом рендеринга достаточно умен, чтобы знать, что есть предшествующий элемент, поэтому он позволяет ему

как вы правильно указали, если вы прямо скажете, чтобы он пошел в 0, он будет делать то, что он сказал

замена исходного порядка одинакова, тогда он достаточно умный, чтобы знать, что больше нет чего-либо предшествующего ему, поэтому автоматически будет означать 0 в этом случае

Ответ 4

Использование auto для top (или слева) указывает браузеру расположить элемент точно так же, как если бы элемент имел "position: fixed".

Этот jsfiddle демонстрирует, что я имею в виду: http://jsfiddle.net/kUmKW/

Попробуйте изменить значение left или top из auto, чтобы узнать, что произойдет.