Почему изображение положения: абсолютное не имеет высоты?Когда я вижу в браузере, он имеет высоту

Question

Я пытаюсь понять, почему div с display:block не будет сидеть под другим div с display:block

Моя наценка такая:

.container{
  display: block;
  position: relative;
}

.container img{
  width: 100%;
  position: absolute;
  top:0;
  left:0;
}

.container .text-left{
  position: absolute;
  top:35rem;
  left:35rem
}

.container .text-right{
  position: absolute;
  top:35rem;
  right:35rem
}

<div class="container" >
  <img src="/image1.jpg" alt="">
  <div class="text_left">
    <h2>HEADING 1</h2>
  </div>
</div>
<div class="container" >
  <img src="/image2.jpg" alt="">
  <div class="text_right">
    <h2>HEADING 2</h2>
  </div>
</div>

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

РЕДАКТИРОВАТЬ: Кажется, что если вы поместите position: absolute element / s внутри позиции: относительный элемент - который может иметь высоту, поскольку этот элемент является изображением - абсолютным элементом /s удаляет эту высоту.Так что вам нужно добавить его обратно как высоту: X.

Но почему ??

Это должное наследие - использование абсолютов способами, не предназначенными для?

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

Может кто-нибудь, пожалуйста, просветите меня?

спасибо

Answer 1

Чтобы все заработало, просто установите img и test_* в relative вместо absolute.Зачем ?Абсолютное положение удаляет элемент из потока, это означает, что, поскольку все ваши container дочерние элементы absolute, это похоже на то, что ваш контейнер не имеет содержимого, поэтому он сворачивается.

.container{
  display: block;
  position: relative;
}

.container img{
  width: 100%;
  position: relative;
  top:0;
  left:0;
}

.container .text_left{
  position: absolute;
  top:90%;
  left:5%;
  color: #fff;
}

.container .text_right{
  position: absolute;
  top:90%;
  right:5%;
  color: #fff;
}

<div class="container" >
  <img src="https://placeimg.com/640/480/any" alt="">
  <div class="text_left">
    <h2>HEADING 1</h2>
  </div>
</div>
<div class="container" >
  <img src="https://placeimg.com/640/480/any" alt="">
  <div class="text_right">
    <h2>HEADING 2</h2>
  </div>
</div>

Answer 2

Причина, по которой вы потеряли высоту, заключается в том, что position:absolute; удаляет элемент из потока, поэтому ваш родительский контейнер не сможет использовать его для определения его высоты.Это не устаревшая разметка, это часть контекста.

Быстрый отрывок из CSS-хитрости

Компромисс (и самое важное, что нужно запомнить) Об абсолютном позиционировании является то, что эти элементы удаляются из потока элементов на странице.Элемент с таким типом позиционирования не подвержен влиянию других элементов и не влияет на другие элементы.Это серьезная вещь, которую следует учитывать каждый раз, когда вы используете абсолютное позиционирование.Его чрезмерное или ненадлежащее использование может ограничить гибкость вашего сайта.

Если по какой-либо причине вам необходимо иметь этот конкретный элемент в качестве position:absolute;, вашей следующей лучшей ставкой будет настройка родительского контейнера с использованиемJavaScript / jQuery, однако это может быть громоздким исправлением.

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

---

EDIT

При этом, если упомянутое решение JavaScript / jQuery не кажется вам громоздким, вы можете попробовать следующее:

$('.container').each(function(){
    $(this).css({
        'padding-top': $(this).find('img').height()+'px'
    });
});

Это добавит padding-top к контейнеру в зависимости от размера изображения.В качестве альтернативы, вы можете добавить пустой div под изображением и настроить его высоту в зависимости от размера изображения.