html - 如何将一个 div 放在另一个之上

Question

我想将一个 div 放在另一个之上。前几天我问过这个问题，有人解释了 z-index 的工作原理(他或她说:“具有较大 z-index 数字的元素将覆盖具有较小 z-index 数字的元素”)

我现在又添加了两个 div，但无法让第四个(我的“文档”/网站的页脚)位于其他 div 之上

这是另一天的问题/主题:How to place a div over another

有人问我想做什么。我刚刚开始学习基础类(class)。最后一个“任务”是创建简历。

这是他们的(示例):

http://i.stack.imgur.com/xLgMM.png

但是，我想稍微改变一下。

我不希望页面上有任何边距(例如，蓝色左栏的左侧)，我不想要圆 Angular ，我不希望 div 之间有空格。也就是说，我希望我所有的“站点”都被颜色覆盖:

背景是米色-粉红色 (#F5F0EC)，粉红色的页眉，灰色的页脚，然后是左侧的浅灰色边距，位于所有这些之上。

这是我目前在我的 CSS 中的内容:

#header {
    width: 106%; 
    background-color: #E8D5C6;
    height: 100px;
    margin-top: -8px;
    margin-left: -8px;
    position: absolute;
    z-index: 2;
}

.left {
    width: 15px; 
    background-color: #919191;
    height: 695px;
    margin-left: -8px;
    margin-top: -8px;
    position: relative;
    z-index: 3;
}

.right {
    width: 106%;
    background-color: #F5F0EC;
    height: 695px;
    margin-left: -8px;
    margin-top: -8px;
    position: relative;
    margin-top: -645px;
    z-index: 1;
}

#footer {
    width: 106%;
    background-color: #404145;
    height: 50px;
    margin-left: -8px;
    position: relative;
    z-index: 4;
}

看起来我的页脚 div 位于背景下方(颜色为 #F5F0EC 的“正确”div)，我希望它位于背景之上。然后，左边的灰色条我希望它位于它们两个(或所有)的顶部

尝试使用 z-index: 1、z-index: 2 等对元素进行排序，但似乎不起作用。

Answer 1

正如您之前链接的答案中的人 ( https://stackoverflow.com/a/32485707/5260563 ) 所说，您需要使用

position: absolute;

当您使元素具有 z-index 时。