Задать вопрос
@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 секции. И я не могу понять чего ширина то меняется при изменении позиции
  • Вопрос задан
  • 185 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
  • beONmax
    Курс HTML / CSS
    1 месяц
    Далее
  • Бруноям
    Вёрстка на HTML и CSS
    3 месяца
    Далее
  • Международная Школа Профессий
    Онлайн-курсы HTML и CSS для начинающих
    3 недели
    Далее
  • Stepik
    Основы вёрстки с HTML и CSS
    1 неделя
    Далее
  • beONmax
    Верстальщик сайтов - HTML, CSS, Bootstrap, JavaScript
    1 месяц
    Далее
Пригласить эксперта
Ответы на вопрос 1
RAX7
@RAX7
Потому что у .block-1 не задана ширина
.block-1 {
    width: 100%;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы