如何将一个div放在另一个[重复]
Posted
技术标签:
【中文标题】如何将一个div放在另一个[重复]【英文标题】：How to place a div over another [duplicate] 【发布时间】：2015-12-05 18:18:24 【问题描述】：我正在尝试将一个 div 放在另一个之上。
要查看我想要实现的目标，请查看此图片：https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg
我希望我的灰色左侧 div 位于粉红色标题的顶部。
到目前为止，这是我的 html：
<body>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</body>
还有我的 CSS：
#header
width: 106%;
background-color: #E8D5C6;
height: 100px;
margin-top: -8px;
margin-left: -8px;
#left
width: 15px;
background-color: #919191;
height: 400px;
margin-left: -8px;
这是把我的粉红色标题放在灰色左边的顶部，我希望它是另一种方式，就像我给你看的照片一样：https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg
【问题讨论】：
z-index: 2 on #left 不这样做？
查看z-index 和绝对定位。 css-tricks.com/almanac/properties/z/z-index
不是已经在上面了吗？它们一开始没有重叠，所以当你在 #left 上使用 position: relative; top:-10px 时，你会看到它确实与粉红色重叠。
有什么理由不能在<html> 或<body> 上使用背景图片作为粉红色？那么你的 DIV 会默认覆盖它吗？您是否正在尝试为网络复制简历？你真的应该澄清你想要达到的目标，因为它根本不清楚。
有什么理由你不能做某事like this？没有绝对定位或 z 索引。有点像你所追求的。
【参考方案1】：
您需要使用z-index 和position:absolute CSS 属性。此外，您还需要通过为top 和left CSS 属性提供一些值来定位第二个DIV（位于另一个之上）。下面是一个例子：
#first
position: absolute;
z-index:1;
#second
position: absolute;
z-index:2;
top: 50px;
left: 50px;
看到这个JSfiddle demo
【讨论】：
【参考方案2】：感谢所有，leo.fcx 和 Mirza 的解释（“Z-index 在第三轴上进行更改。元素带有较大的 z-index 数字将覆盖一个较小的元素") 我做到了
我还不知道 z-index 是什么。
我终于有了：
#header
width: 106%;
background-color: #E8D5C6;
height: 100px;
margin-top: -8px;
margin-left: -8px;
position: absolute;
#left
width: 15px;
background-color: #919191;
height: 400px;
margin-left: -8px;
margin-top: -8px;
position: relative;
z-index: 2;
这非常适合我想要的。
【讨论】：
【参考方案3】：try this example here, it was working fine you expectedhttp://jsfiddle.net/maheswaran/fcw043zL/
【讨论】：
【参考方案4】：我没有完全得到您的预期结果，但这里有一个 POC
#header
width: 106%;
background-color: #E8D5C6;
height: 100px;
margin-top: -8px;
margin-left: -8px;
position: absolute;
z-index: 1;
#left
width: 15px;
background-color: #919191;
height: 400px;
margin-left: -8px;
position: absolute;
z-index: 2;
<body>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</body>【讨论】：
【参考方案5】：Z-index 在第三个轴上进行更改。 z-index 编号较大的元素将覆盖具有较小 z-index 编号的元素。
为了琐事，任何元素的默认 z-index 都是auto，这意味着它从其 父 元素继承了一个值。 html 元素的 z-index 为 0。
编辑：查看this JSFiddle。 #left div 在#right 的上方。从左侧 div 的 CSS 样式中移除 z-index 属性，您将看到它不会再高于另一个 div。
【讨论】：
以上是关于如何将一个div放在另一个[重复]的主要内容，如果未能解决你的问题，请参考以下文章