Почему при изменении позиции меняется ширина у абсолютно позиционированного элемента?

Question

[stan288]

Есть такой pen: https://codepen.io/stn28/pen/ExepRrp Кому неудобно лазить на сторонние ресурсы, вот пример:

* {
  box-sizing: border-box;
}

.wrapper {
   position: relative;
   border: 1px solid black;
   width: 400px;
}

.block-1 {
   position: absolute;
   left: 0;
   border: 2px solid red;
   height: 1000px;
}

<div class="wrapper">
  <div class="block-1">

    <div>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo temporibus illum qui ducimus iste voluptate veniam saepe! Ipsam, id optio fugiat officia mollitia eos! Repellat molestias fugiat assumenda necessitatibus quas?
    </div>

  </div>
</div>

Почему при изменении позиции у block-1 (к примеру поменяйте с left: 0; на left: 1000px;) меняется его ширина? Это видно сразу невооруженным глазом даже не открывая devTools, он почти в 4 раза становится меньше. Почему такое странное поведение? Мы ведь не ширину меняем, а позицию у абсолютного элемента

Дело в том, что я прохожу курс по верстке и автор говорит что абсолютно позиционированный элемент как бы выпадает из DOM. Я таким образом, как в примере реализовал сайдбар на сайте и скрываю его меняя позицию left. Wrapper это как обертка для сайдбара и main секции. И я не могу понять чего ширина то меняется при изменении позиции

Answer 1

[RAX7]

Потому что у .block-1 не задана ширина

.block-1 {
    width: 100%;
}

Comments

[stan288]

Ну а если не задавать ширину, все же, почему такое поведение? При left: 0 одна ширина, при другой позиции другая. Я ожидал что он просто будет со своей исходной шириной сдвигаться вправо, а он еще и уменьшается. С чем это связано? Повторюсь если мы не будем задавать ширину, а она по умолчанию будет

[RAX7]

stan288, если не задана ширина, то она определяется по содержимому блока, но она не может быть больше свободного места в родительском элементе. Поэтому элемент как бы упирается в правый край родителя и сужается. Я, правда, не могу сейчас найти ссылку на хороший источник, где описано это поведение.