绝对div涵盖静态div

Question

我有一个包含position:relative和2个子div的父包装，1个孩子为static，而absolute为absolute。出于某种原因，z-index孩子即使用static也会保持静态。如何在顶部强制使用静态div？

我希望div div内容确定父absolute的高度，因此我不想改变其位置。

div div适用于应显示在父.full-wrapper { width: 710px; margin: 0 auto; position: relative; } .timeline-sum-wrapper { padding: 10px; clear: both; background-color: gray; z-index: 99999; height: 200px; } .soccer-field { position: absolute; height: 200px; bottom: 0px; width: 98%; right: 1%; background-color: red; height: 150px; }底部的背景图片。

＆＃13;

＆＃13;

<div class="full-wrapper">
  <div class="timeline-sum-wrapper">
  </div>
  <div class="soccer-field">
  </div>
</div>

＆＃13;

maven-jar-plugin

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要.timeline-sum-wrapper有一个职位relative，absolute或fixed。

引自w3.org：

  

如果一个元素的位置是＆＃39;物业有一个   除了＆＃39;静态＆＃39;。

之外的其他值

Stack Overflow的相关问题：

Why is z-index ignored with position:static?

Why is my z-index being ignored?

Answer 2

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

第一个：

    <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>

或

<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>