Why does the div overlap another despite the high z-index?

�

▪ ▪2015-10-07 17:02:16

css

▪ ▪, 2015-10-07 17:02:16

I can't figure out why the first cd-background-wrapper block overlaps the other one (start-area), even though the second one has a higher z-index. And in general, it shouldn't be like that. The second block is below the first in the code, so it should be above it. Or am I wrong?
Here is the code:

<body>

  <div class="cd-background-wrapper">
    <div class="cd-floating-background">

    </div>
  </div>

  <div id="start-area">
    
    </div>


</body>

.cd-background-wrapper {

  position: relative;
  width:100%;
  height:100%;
  overflow: hidden;
  z-index:1;
}
#start-area{
  position:fixed;
  width:100%;
  height:100%;
  background:#090c13;
  z-index:99;
}

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Alex Sokol, 2015-10-07
@kingdomofcrooked

You forgot to specify the position for #start-area.
Set top: 0; and you will have your block

#start-area{
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: blue;
z-index: 99;
}

D

Dmitry Novikov, 2015-10-07
@dmitriy_novikov

In your example it's ok, #start-area is on top.
Perhaps some other styles or js are affected.

D

dk-web, 2015-10-07
@dk-web

jsfiddle.net/4pfj8xg3
what overlaps where?