Когда top не установлен, почему позиция: абсолютный div не перекрывается со своими братьями и сестрами - PullRequest
Новая
       7

Когда top не установлен, почему позиция: абсолютный div не перекрывается со своими братьями и сестрами

0 голосов
/ 27 декабря 2018

Контекст: когда position:absolute <div> находится непосредственно в <body>, и есть <div> в качестве его брата, как в JSFiddle .

Вопрос: Почему position:absolute <div> не перекрывается с его братьями и сестрами, когда свойство top явно не установлено.

Насколько я понимаю, но это может быть неверно, если для <div> установлено значение position:absolute, он будет расположен относительно тела, если ни один из его родителей и родителей родителей не установлен на position:relative.Таким образом, top свойство position:absolute <div> должно по умолчанию принимать начало body, а два div должны перекрываться.

Код здесь: 

#box_1 { 
  width: 200px;
  height: 200px;
  background: green;
}

#box_2 {
  position: absolute;
  left: 200px;
  width: 200px;
  height: 200px;
  background: blue;
}
<!DOCTYPE html>
  <html>
    <head>
    </head>
    <body>
      <div id="box_1"></div>
      <div id="box_2"></div>
    </body>
  </html>

1 Ответ

0 голосов
/ 27 декабря 2018

Обновленный ответ:

Это потому, что значение по умолчанию top равно auto, поэтому он позволяет браузеру вычислять позицию верхнего края.

С MDN :

Для абсолютно позиционированных элементов положение элемента основано на свойстве bottom, тогда как height: auto рассматривается каквысота в зависимости от содержания;или если bottom также auto, элемент расположен там, где он должен располагаться вертикально, если бы он был статическим элементом.

Таким образом, он будет расположен в соответствии с bottom илиtop, но, поскольку в вашем примере его нет, позиционируется как статический элемент .

Старый ответ:

Потому что вы установили bottom: 0;, так что он придерживается дна.

...