gpt4 book ai didi

javascript - 将 div 放在 div 顶部

转载 作者:行者123 更新时间:2023-12-02 21:52:12 24 4
gpt4 key购买 nike

我有以下 3 个 div。填充物位于 Logo 顶部。当 Logo 的 margin-left:100px 时,所有 3 个 div 都会正确排列。但是当我将 margin-left: 更改为 margin-left:200px 时,背景会被推到下一行。为什么填充物与 Logo 重叠,但我无法使填充物和 Logo 与背景重叠?

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>

最佳答案

不确定我之前是否回答过这个问题,但你可以通过给背景 div 赋予position:absolute 来实现这一点。如果您希望背景出现在两个 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 中

关于javascript - 将 div 放在 div 顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60104504/

24 4 0