logo标签列表

如何将一个div放在另一个div上方

htmlcss
5
我正在尝试将一个div放在另一个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。
#left 上的 z-index: 2 不起作用吗？ - Andy
1
请查看z-index和绝对定位。https://css-tricks.com/almanac/properties/z/z-index/ - timgavin
1
它不是已经在上面了吗？首先它们并没有重叠，所以当你在#left上使用position: relative; top:-10px时，你会看到它确实与粉色重叠了。 - jaunt
1
你为什么不能在 <html> 或 <body> 上使用背景图片来实现粉色背景？这样你的 DIV 元素默认会覆盖它。你是想要在网页上复制简历吗？你真的应该澄清你想要实现什么，因为目前并不清楚。 - hungerstar
你有没有什么理由不能像这个例子（http://jsfiddle.net/8crv7x0h/）那样做呢？没有绝对定位或z-index。看起来有点像你想要的。 - hungerstar
5个回答
5
你需要使用 z-index 和 position:absolute CSS 属性。此外，你还需要通过为第二个DIV（位于另一个DIV之上）设置一些值来定位它的位置，例如给top和left CSS属性赋值。以下是一个例子：
#first{
    position: absolute;
    z-index:1;
}
#second{
    position: absolute;
    z-index:2;
    top: 50px;
    left: 50px;
}

请查看此JSfiddle演示。
1

Z-index改变了第三个轴。具有较大z-index数值的元素将覆盖具有较小数值的元素。

仅出于好奇，任何元素的默认z-index都是auto，这意味着它继承自其父元素的值。html元素的z-index为0。

编辑：查看this JSFiddle。#left div在#right div之上。从left div的CSS样式中删除z-index属性，您会发现它不再在另一个div之上。

0

我不太明白你期望的结果，但这是一个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>

0
0
感谢所有人，在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;
}

对于我想要的，这完美地发挥作用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接