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

Question

我想在另一个上放置一个 div。前几天我问过这个问题，有人解释了 z-index 的工作原理（他或她说：“z-index 编号较大的元素将覆盖一个较小的元素”）

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

这是前几天的问题/主题：How to place a div over another

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

这是他们的（示例）：

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

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

我不想要页面上的任何边距（例如，蓝色左栏的左侧），我不想要圆角，我不想要 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），我希望它位于其上方。然后，左边的灰色条我想要它在它们两个（或全部）的顶部

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

Answer 1

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

position: absolute;

当你让一个元素有一个z-index。