Как избежать наложения между двумя разделами при использовании position: absolute в CSS

#html #css

#HTML #css

Вопрос:

Поскольку вы видите эту ссылку на CodePen, я пытаюсь избежать наложения между двумя разделами с именем их класса box-container. Поскольку красный прямоугольник равен position: absolute, box-контейнер учитывает только черный прямоугольник как свою общую высоту.

Поскольку мне нужно поместить красный прямоугольник над черным прямоугольником, я должен использовать position: absolute, но как я могу позволить box-container считать красный прямоугольник его общей высотой?

 body {
  background-color: pink;
  display: flex;
  justify-content: center;
}

.container {
  width: 500px;
}

.box-container {
  margin: 10px 0;
  width: 100%;
  position: relative;
}

.box-text {
  width: 300px;
  height: 200px;
  background-color: black;
}

.box-image {
  width: 300px;
  height: 200px;
  background-color: red;
  position: absolute;
  right: 0;
  top: 60px;
  z-index: 1
}

 <div class="container">
  <div class="box-container">
    <div class="box-text"></div>
    <div class="box-image"></div>
  </div>
  <div class="box-container">
    <div class="box-text"></div>
    <div class="box-image"></div>
  </div>
</div>

1. почему бы не использовать position: relative вместо этого?

2. Если я использую position: relative , то как я могу разместить box-image на box-text ?

3. Измените порядок в html…

4. Вам пришлось бы немного поиграть с z-index и перемещать части по мере необходимости

5. вы можете использовать float для достижения этого эффекта codepen.io/XiaoYyyy/pen/WmYMzM

Ответ №1:

В конечном итоге это выглядело бы примерно так при использовании position: relative ; теперь красное поле также является частью общей высоты; вы можете перемещать его и изменять по своему усмотрению.

 body {
  background-color: pink;
  display: flex;
  justify-content: center;
}

.container {
  width: 500px;
}

.box-container {
  margin: 10px 0;
  width: 100%;
  position: relative;
}

.box-text {
  width: 300px;
  height: 200px;
  background-color: black;
}

.box-image {
  width: 300px;
  height: 200px;
  background-color: red;
  position: relative;
  right: 0;
  top: -100px;
  left: 150px;
  z-index: 1
}

 <div class="container">
  <div class="box-container">
    <div class="box-text"></div>
    <div class="box-image"></div>
  </div>
  <div class="box-container">
    <div class="box-text"></div>
    <div class="box-image"></div>
  </div>
</div>

1. Возможно ли поместить красное поле в самый правый конец?

2. Вы можете разместить его где угодно; вам просто нужно указать нужное количество единиц для перемещения; помните, что position: relative это просто позволяет перемещать элемент, начиная с его начальной позиции; если вы хотите переместить его 100px выше того места, где он был, вы можете использовать bottom:100px или top:-100px

3. Понятно, тогда как мне сообщить красному прямоугольнику, где находится самый правильный конец? Поскольку мне нужно применить это к адаптивным дизайнам. box-container имеет разные размеры ширины в зависимости от ширины экрана.

4. Я бы предложил использовать такие функции, как calc() и подобные, для вычисления размера экрана и тому подобное; но на самом деле это другая ситуация; либо это, либо немного реструктурируйте свой HTML и CSS; честно говоря, это был бы другой вопрос