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

Question

Есть такой 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

Когда вы изменяете позицию элемента с абсолютным позиционированием, вы также изменяете его начальную точку (или точку отсчета), относительно которой рассчитываются его размеры и позиционирование. В случае с вашим примером, при изменении значения свойства left у элемента .block-1, его начальная точка смещается на указанное количество пикселей вправо от левого края родительского элемента .wrapper. Это означает, что размеры и позиционирование .block-1 теперь рассчитываются относительно этой новой начальной точки, что приводит к изменению ширины элемента.

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

Поэтому при проектировании макета необходимо учитывать возможные последствия изменения позиционирования элементов на странице и корректировать их размеры и позиционирование в соответствии с этими изменениями.

БЛОГ НА HUSL

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

Ответы (1 шт):