z-index issue CSS

Question

I have a container and dynamically generated div in the container.

HTML

<div id="overlay">
</div>
<div id="cont">
    <div id="e1">
        Some
    </div>
    <div id="e2">
        Content
    </div>
</div>

CSS

#cont{
    position: fixed;
    top:40%;
    left:20%;
    z-index:999;
    color:#a8a8a8;
}
#overlay{
    position:fixed;
    background: rgb(0,0,0);
    opacity: 0.5;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1000;
}
#e2{
    z-index:1001;
}

Check this jsfiddle: http://jsfiddle.net/UkbXU/

I have an overlay with z-index 1000 and background rgba(0,0,0,0.5) and the photo container is behind overlay i want only one element to be above overlay, that is with z-index 1001. There are other elements in the container, i do this to show element highlighted effect. But creating a class with z-index: 1001 does'nt bring the element above overlay.

How can i set the z-index of one element to be greater than container?

Stephan · Accepted Answer · 2013-03-17 15:46:19Z

7

you have to move the overlay-div into the content-div:

<div id="cont">
    <div id="overlay"></div>

    <div id="e1">
        Some
    </div>
    <div id="e2">
        Content
    </div>
</div>

and position #e2 have to set to relative. See http://jsfiddle.net/UkbXU/10/

Otherwise it is impossible, because #cont and #overlay are both creating new stacking contexts. These couldn't be merged again.

answered Mar 17, 2013 at 15:46

Stephan

1,2469 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Derfder Over a year ago

yes that's good but if the #cont is e.g. a widget in a sidebar then overlay won't be accross the whole screen only for the widget area or?

Stephan Over a year ago

#overlay takes up the whole screen (as defined in CSS width/height/position). But if it lays over the whole page depends on #cont's own position within the stacking context of the whole page.

Derfder · Accepted Answer · 2013-03-17 15:40:03Z

0

Try

#e2{
    z-index:1001;
    position: absolute;
}

It should make the trick.

If not try:

#e2{
    z-index: 9999 !important;
    position: absolute !important;
    top: 0px; //you can change that
    left: 0px; //you can change that
}

If it is still not working, well probably some javascript is setting bigger z-indes tahn 9999 to #overlay.

answered Mar 17, 2013 at 15:40

Derfder

3,33412 gold badges52 silver badges85 bronze badges

3 Comments

Derfder Over a year ago

you need to change #cont z-index to more then overlay identifier. What are you trying to make?

Hari krishnan Over a year ago

if changing z-index to #cont then it works but i only want to show only one content to be above #overlay

Derfder Over a year ago

You need to do it using javascript. get the content div and put it before overlay again or something like that. Are you doing it in some gallery mode or to show some error?

Collectives™ on Stack Overflow

z-index issue CSS

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related