javascript - 将 div 放在 div 之上
问题描述
我有以下 3 个 div。填充物位于徽标顶部。当 logo 有 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>
解决方案
不确定我之前是否回答过这个问题,但是您可以通过将 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
推荐阅读
- java - 设置后退按钮无法使用波纹管代码?
- java - Javadoc 选项文件中的单行注释支持哪些字符?
- android - 如何在不添加活动的情况下添加用于在片段之间滑动的 viewPager
- javascript - 使用带有登录系统的 Electron 在 2 个 HTML 文件之间传递输入变量
- symfony - Symfony Doctrine DQL 如何在主 SELECT 的 SUM 中添加 SELECT
- reactjs - React 测试组件模拟点击不识别功能
- python - 熊猫中列的可能组合
- java - 如何在 Activity 对 ViewModel 的 LiveData 对象的观察调用中为 ActionBar 执行 setTitle()?
- c++ - 如何找到矩阵中特定项目之间的最短路径?
- javascript - 反应头盔未在视图页面源中显示元标记,但在检查时显示在元素中