Предотвращение перекрытия нескольких фиксированных элементов

Question

если у меня есть два элемента на моей странице.У одного фиксированное позиционирование вверху страницы style="position:fixed; left:0; top:0;right:0;", а у другого фиксированное позиционирование слева от страницы style="position:fixed; left:0; top:0;bottom:0;". Есть ли способ разместить левый div так, чтобы его верхний край совпал с нижним краем верхнегопозиционируется div без жесткого кодирования полей или отступов?По умолчанию будет частичное перекрытие

Answer 1

Если у верхнего div есть определенное значение height, вы можете просто взять это значение и использовать if для левой установки DIVs top:

.top,
.left {
  position: fixed;
}

.top {
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: red;
}

.left {
  top: 100px;
  bottom: 0;
  left: 0;
  width: 150px;
  background: green;
}

<div class="top"></div>
<div class="left"></div>

Answer 2

Попробуйте это

.div0{
  position: relative;
  width: 600px;
  height: 400px;
  background: blue;
  perspective: 100px;
}

.div1{
 position:fixed; left:0; top:0;right:0;
 width: 200px;
 height: 200px;
 background-color: red;

}

.div2{
 position:fixed; left:200; bottom:0;
 width: 200px;
 height: 200px;
 background-color: green;
}

<div class="div0">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>

Answer 3

Попробуйте, я думаю, вы хотите сделать то же самое.

.parent{
position: relative;
background-color: #000;
width: 600px;
height: 400px;
}
.child1,.child2{
position: absolute;
left: 0;
background-color: #f00;
height: 190px;
}
.child1{
top: 0;
right: 0;
}
.child2{
bottom: 0;
width: 200px;
}

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>

Answer 4

Размещение div в другом контейнере div и определение стиля position:fixed для контейнера div решит вашу проблему.

<div style="position:fixed;top:0;left:0;right:0;">
  <div>div 1</div>
  <div>div 2</div>
</div>