将 div 放在 div 的顶部

Question

我有以下 3 个 div。 填充物位于徽标顶部。 当徽标具有 margin-left:100px 时，所有 3 个 div 都正确排列。 但是当我将 margin-left: 更改为 margin-left:200px 时，背景会被推到下一行。 为什么填充物与徽标重叠，但我无法让填充物和徽标重叠 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:100px; 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:500px; height:90vw; overflow:visible; position:relative; z-index:25; }

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

Answer 1

不确定我之前是否回答过这个问题，但您通过将 position:absolute 赋予背景 div 来实现这一点。 如果您希望背景位于两个 div 后面，请减少 z-index。 另外我认为你看到另外两个 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:100px; 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:100%; height:90vw; overflow:visible; position:absolute; z-index:5; }

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

更好的方法是在背景 div 中添加另外两个 div