поместите div поверх div, не работающего над третьим div

Question

У меня есть следующие 3 дел. наполнитель находится сверху lo go. Все 3 div'а выстраиваются правильно, когда у lo go есть margin-left: 100px. Но когда я изменяю margin-left: margin-left: 200px, фон переносится на следующую строку. Почему наполнитель перекрывается lo go, но я не могу получить наполнитель и lo go перекрывать bg?

var logo = document.querySelector("#logo");
var bg = document.querySelector("#bg");

var rect_logo = logo.getBoundingClientRect();
var rect_bg = bg.getBoundingClientRect();

var filler = document.getElementById('filler');

filler.style.height = logo.offsetHeight + "px";

#container {
  height: 100vw;
}

#logo {
  display: inline-block;
  color: white;
  background-color: lightblue;
  position: relative;
  width: 20%;
  height: 5%;
  text-align: center;
  vertical-align: top;
  z-index: 10;
  margin-left: 300px;
  overflow: visible;
}

#filler {
  display: inline-block;
  position: relative;
  width: 50px;
  background-color: green;
  vertical-align: top;
  z-index: 15;
  margin-left: -75px;
  overflow: visible;
}

#bg {
  display: inline-block;
  color: white;
  background-color: blue;
  width: 50%;
  float: right;
  height: 90vw;
  overflow: visible;
  position: relative;
  z-index: 5;
  margin-left: -75px;
}

<div id='container'>
  <div id='logo'>LOGO</div>
  <div id='filler'></div>
  <div id='bg'>BackGround</div>
</div>

Answer 1

Общая ширина ваших элементов равна 50% + 20% + 50px, тогда у вас есть два отрицательных поля (-150px), что даст нам 70% - 100px, что означает, что вы все равно можете использовать 30% + 100px внутри поля до создания разрыв строки. на несколько меньше, чем это, потому что мы должны также рассмотреть пробелы.

Вот для иллюстрации:

var logo = document.querySelector("#logo");
var bg = document.querySelector("#bg");



var rect_logo = logo.getBoundingClientRect();
var rect_bg = bg.getBoundingClientRect();





var filler = document.getElementById('filler');
filler.style.height = logo.offsetHeight + "px";

#container {
  height: 100vw;
}

#logo {
  display: inline-block;
  color: white;
  background-color: lightblue;
  position: relative;
  width: 20%;
  height: 5%;
  text-align: center;
  vertical-align: top;
  z-index: 10;
  margin-left: calc(30% + 95px);
  overflow: visible;
}

#filler {
  display: inline-block;
  position: relative;
  width: 50px;
  background-color: green;
  vertical-align: top;
  z-index: 15;
  margin-left: -75px;
  overflow: visible;
}

#bg {
  display: inline-block;
  color: white;
  background-color: blue;
  width: 50%;
  float: right;
  height: 90vw;
  overflow: visible;
  position: relative;
  z-index: 5;
  margin-left: -75px;
}

<div id='container'>
  <div id='logo'>LOGO</div>
  <div id='filler'></div>
  <div id='bg'>BackGround</div>
</div>

Сделайте значение немного больше, и синий будет на новой строке

var logo = document.querySelector("#logo");
var bg = document.querySelector("#bg");



var rect_logo = logo.getBoundingClientRect();
var rect_bg = bg.getBoundingClientRect();





var filler = document.getElementById('filler');
filler.style.height = logo.offsetHeight + "px";

#container {
  height: 100vw;
}

#logo {
  display: inline-block;
  color: white;
  background-color: lightblue;
  position: relative;
  width: 20%;
  height: 5%;
  text-align: center;
  vertical-align: top;
  z-index: 10;
  margin-left: calc(30% + 98px);
  overflow: visible;
}

#filler {
  display: inline-block;
  position: relative;
  width: 50px;
  background-color: green;
  vertical-align: top;
  z-index: 15;
  margin-left: -75px;
  overflow: visible;
}

#bg {
  display: inline-block;
  color: white;
  background-color: blue;
  width: 50%;
  float: right;
  height: 90vw;
  overflow: visible;
  position: relative;
  z-index: 5;
  margin-left: -75px;
}

<div id='container'>
  <div id='logo'>LOGO</div>
  <div id='filler'></div>
  <div id='bg'>BackGround</div>
</div>

Поэтому просто убедитесь, что вы не превышаете 100%, учитывая все поля и ширину.

Answer 2

Один из способов решения этой проблемы - добавить position: absolute к вашему фону. Он будет работать нормально. Значение позиции по умолчанию - stati c для вашего фона, поэтому оно перемещается на следующую строку.

var logo = document.querySelector( "#logo" );
  var bg = document.querySelector( "#bg" );



  var rect_logo = logo.getBoundingClientRect();
  var rect_bg =   bg.getBoundingClientRect();
  
  
  
  
  
  var filler = document.getElementById('filler');
  filler.style.height=logo.offsetHeight + "px";

#container{

height:100vw;}

#logo{
display:inline-block;
color:white;
background-color:lightblue;
position:relative;
width:20%;
height:5%;
text-align:center;
vertical-align:top;
z-index:10;
margin-left:300px;
overflow:visible;


}

#filler{
display:inline-block;
position:relative;
width:50px;
background-color:green;
vertical-align:top;
z-index:15;
margin-left:-75px;
overflow:visible;


}
#bg{
display:inline-block;
color:white;
background-color:blue;
width:50%;
float:right;
height:90vw;
overflow:visible;
position:relative;
z-index:5;
margin-left:-75px;
position:absolute;

}

<div id='container'>
   <div id='logo'>LOGO</div>
   <div id='filler'></div>
   <div id='bg'>BackGround</div>
</div>

Лучше было бы поместить два других элемента div в фоновый элемент div