absolute div covers static div

Question

I have a parent wrapper with position:relative and 2 child div inside, 1 child is static and the is absolute. For some reason, the absolute child keeps covering static one even with z-index. How can I force static div on top?

I want the static div content to determine the height of the parent div so I don't want to change its position.

The absolute div is for a background image that should appear at the bottom of parent 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;
}

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

Absolute postitioned elements are always in front of static ones. `z-index` does not work on static elements. — ssc-hrep3, Oct 26 '17 at 17:39
`z-index` need to be minimum in `relative position` as @ssc-hrep3 on static doesn't work. — , Oct 26 '17 at 17:42
@ssc-hrep3 is right. @hretic If you still want take your absolute positioned element in the back layer, you can apply `z-index: -1` to it. — Rohit Verma, Oct 26 '17 at 17:43
It's just in the back layer now, not disappeared. What exactly you want to achieve, you can share, if you have any design. — Rohit Verma, Oct 26 '17 at 17:49
Do you not want any mouse-events on `.soccer-field`? If that's the case, you'll want to declare `pointer-events: none;` on `.soccer-field`. — UncaughtTypeError, Oct 26 '17 at 17:52
@UncaughtTypeError no its just for a background image which should be at the bottom of parent div ..... it doesn't have any other use , and parent div already has a bg image so i cant ad bg-image to that — hretic, Oct 26 '17 at 17:58
You know you can combine more than one background image right? *See:* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds **&** https://css-tricks.com/snippets/css/multiple-backgrounds-syntax/ - it might be worth exploring this route. — UncaughtTypeError, Oct 26 '17 at 18:02

score 0 · Accepted Answer · answered Oct 26 '17 at 17:49

You need your .timeline-sum-wrapper to have a position relative, absolute or fixed.

Quote from w3.org:

An element is said to be positioned if its 'position' property has a value other than 'static'.

Related questions on Stack Overflow:

Why is z-index ignored with position:static?

Why is my z-index being ignored?

score 0 · Answer 2 · answered Oct 26 '17 at 17:58

position: static is not working z-index. This have two solution

First One:

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

Or

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

absolute div covers static div

2 Answers2