Html 绝对div包括静态div

我有一个带有

位置的父包装器：relative

和两个子div，其中一个子是

static

，另一个子是

absolute

。出于某种原因，

absolute

子级即使使用

z-index

也会覆盖静态子级。如何在顶部强制使用静态div

我希望

static

div

内容确定父级

div

的高度，因此我不想更改其位置

absolute

div

用于背景图像，该背景图像应显示在父级

div

的底部

。完整包装器{
宽度：710px；
保证金：0自动；
位置：相对位置；
}
.时间线总和包装器{
填充：10px；
明确：两者皆有；
背景颜色：灰色；
z指数：99999；
高度：200px；
}
.足球场{
位置：绝对位置；
高度：200px；
底部：0px；
宽度：98%；
右：1%；
背景色：红色；
高度：150像素；
}

---

您需要您的

.timeline sum wrapper

来拥有一个位置

相对的
，
绝对的
或
固定的

引自：

如果元素的“位置”属性具有
“静态”以外的值

有关堆栈溢出的相关问题：


位置：静态z索引不工作。这有两个解决方案

第一个：

    <style>
    .full-wrapper {
        width: 710px;
        margin: 0 auto;
        position: relative;
    }

    .timeline-sum-wrapper {
        padding: 50px;
        clear: both;
        background-color: gray;
        height:200px ;
    }
    .soccer-field {
        position: absolute;
        height: 200px;
        bottom: 0px;
        width: 98%;
        right: 1%;
        background-color: red;
        height:150px ;
        z-index: -1;
    }
    </style>


.全套包装{
宽度：710px；
保证金：0自动；
位置：相对位置；
}
.时间线总和包装器{
填充：50px；
明确：两者皆有；
背景颜色：灰色；
高度：200px；
}
.足球场{
位置：绝对位置；
高度：200px；
底部：0px；
宽度：98%；
右：1%；
背景色：红色；
高度：150像素；
z指数：-1；
}

或

<style>
.full-wrapper {
    width: 710px;
    margin: 0 auto;
    position: relative;
}

.timeline-sum-wrapper {
    padding: 50px;
    clear: both;
    background-color: gray;
    height:200px;
    position: relative;
    z-index: 2;
}
.soccer-field {
    position: absolute;
    height: 200px;
    bottom: 0px;
    width: 98%;
    right: 1%;
    background-color: red;
    height:150px ;
    z-index: 1;
}
</style>


.全套包装{
宽度：710px；
保证金：0自动；
位置：相对位置；
}
.时间线总和包装器{
填充：50px；
明确：两者皆有；
背景颜色：灰色；
高度：200px；
位置：相对位置；
z指数：2；
}
.足球场{
位置：绝对位置；
高度：200px；
底部：0px；
宽度：98%；
右：1%；
背景色：红色；
高度：150像素；
z指数：1；
}
绝对位置元素始终位于静态元素之前<代码>z索引
对静态元素不起作用。
z索引
需要在相对位置最小，因为静态上的@ssc-hrep3不起作用。@ssc-hrep3是正确的@hretic如果你仍然想在后一层中获取绝对定位元素，你可以对其应用
z-index:-1
。@RohitVerma
z-index:-1
将使绝对俯冲消失