вопрос позиционирования CSS Div

Question

У меня есть три деления со следующим css:

div#container {
  width: 780px;
}
div#photos {
  width: 780px;
  height: 300px;
}
div#content {
  position: relative;
  top: -106px;
  width: 780px;
}


<div id="container">
  <div id="photos">photos are here</div>
  <div id="content">content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer</div>
</div>

Моя проблема заключается в том, что, поскольку я установил верхний слой содержимого: -106px под ним большой пробел, когда я хотел, чтобы div «container» заканчивался сразу после div «content». Я попытался установить поле margin-bottom: -106px для div «container», но это не изменило высоту div «container».

div "content" будет иметь различную высоту, как, очевидно, для текста и т. Д. Есть ли способ сделать эту работу?

Заранее спасибо:)

Answer 1

Вместо использования position: relative и установки top вы можете добиться того же эффекта без пробела, установив отрицательное значение margin-top:

div#content {
  margin-top: -106px;
  width: 780px;
}

Answer 2

Я предлагаю другой подход, просто разместите ваше изображение и затем поместите содержимое с верхним полем (или отступ, если вам нужен фон) на контейнер.

div#container {
  width: 780px;
  margin-top:106px;
}
div#photos {
  width: 780px;
  height: 300px;
  position:absolute;
  top:0;
  z-index:50;
}
div#content {
  position: relative;
  width: 780px;
  z-index:100;
}

Answer 3

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

Answer 4

Попробуйте изменить свой CSS на

div#container {
width: 780px;
position:relative;  <---------------
}
div#photos {
width: 780px;
height: 300px;
background: #aaaaaa;
}
div#content {
  position:absolute; <------------
  top: 106px;        <------------
  width: 780px;

}

Answer 5

Установите ваш рост на вашем контейнере div на 100%, может помочь. Другая вещь, которую вы можете попробовать, это установить свойство overflow для вашего контейнера div. Переполнение: скрытое или переполнение: auto, оба позволят вашему контейнеру div «обернуть» другие ваши divы лучше.

Имейте в виду, ваш пробег будет отличаться в зависимости от браузера.