Position absolute has greater z-index than position fixed

Question

I have a poblem with an element that is positioned relative. The problem is that I have a header with position fixed and content which is positioned relative. If I scroll down the content the element is put in front of the header. I tried with z-index but I just can't get it to work. I have put z-index:999 on header.

Here you can see my jsFiddle

Here is a picture: enter image description here

Perhaps you can find the answer [in this question](http://stackoverflow.com/q/5218927/1313143)? — MarioDS, May 01 '13 at 08:43
In `position:fixed` i gave `z-index:9999` nad in `relative` `z-index:1` — dinodsaurus, May 01 '13 at 08:48
You did? We need to see some code then. Edit your question with the html and css please. — Francisco Afonso, May 01 '13 at 08:51

Kevin Bowersox · Accepted Answer · 2013-05-01T09:26:44.367

The z-index on the relative positioned element should be lower than the z-index on the fixed position element. Here is a quick example:

HTML

<div id="fixed">Fixed Position</div>
<div id="relative">Relative Position</div>

CSS

body{
    height: 3000px;
}

#fixed{
    top: 0;
    height; 100px;
    background: green;
    width: 100%;
    position: fixed;
    z-index: 2;
}

#relative{
    position: relative;
    top: 100px;
    left: 50px;
    height: 100px;
    width: 100px;
    background: red;
    z-index: 1;
}

Working Example: http://jsfiddle.net/XZ4tM/1/

Fixing Your Example

The header styling has an issue, there are two colons :: proceeding the z-index properties value.

  .header{
        width:960px;
        background: #43484A;
        height:80px;
        position: fixed;
        top:0;
        z-index: 9999; /* Removed extra : here */
   }

Fixed Example http://jsfiddle.net/kUW66/2/

score 2 · Answer 2 · edited Mar 26 '14 at 18:20

What I think you did is correct that using z-index in only a option. I have some work for you to understand.

Please follow the JS Fiddle link

HTML

<div id="header">Header</div>
<div id="content1"><div id="content2"></div></div>

CSS

body{
    margin:0px auto;
    color:#FFF;
}
#header{
    background-color:#006666;
    width:100%;
    height:50px;
    position:fixed;
    text-align:center;
    font:bold 12px Arial, Helvetica, sans-serif;
    line-height:50px;
    display:block;
    z-index:10;
}
#content1{
    width:70%;
    height:1200px;
    margin:0px auto;
    background-color:#FFFF66;
    position:relative;
    top:50px;
    z-index:9;

}
#content2{
    width:50px;
    height:250px;
    margin:0px auto;
    background-color:#F60;
    postition:absolute;
    left:50px;
    top:50px;
}

Hope that helps.

This is not how you post code with a jsFiddle link. Try again. — BoltClock, May 01 '13 at 09:12

score 0 · Answer 3 · answered May 01 '13 at 08:43

0

"Content" is relative to the window, not the grey square.

Did you try to make that grey square position:relative?

Without the HTML and the CSS, it's really hard to know the real cause.

answered May 01 '13 at 08:43

brunoais

6,258
8
39
59

score -1 · Answer 4 · answered May 01 '13 at 09:24

-1

   .categories li{
        position:relative;
        z-index:-1;
        list-style: none;
        float:left;
        width:310px;
        height:310px;
        color:white;
        background:#77647F;
        margin-right:10px;
   }

check this fiddle :)HERE

I have changed the z-index to -1 to make it work.

answered May 01 '13 at 09:24

DiederikEEn

753
8
17

3

Note that using a negative z-index tends to make content unclickable, which is problematic in many situations. – Kenneth M. Kolano May 16 '18 at 17:57

Position absolute has greater z-index than position fixed

4 Answers4

Fixing Your Example

Linked