How to resolve popup overlay issue

Question

I have two div my html page header div and my popup overlay div.I am facing z-index issue when i opening my popup overlay is not applying only for header div.I want to apply overlay except my popup.How to resolve this issue?

Popup Overlay CSS:

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0; 
z-index: 100; 
width:100%;
height:100%;
background:#fff;
opacity:.60;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);
}

Header CSS:

.header {
display: block;
top: 0px;
left: 0px;
width: 100%;
position: fixed;
z-index: 100;
margin: 0px;
padding: 0px;
background-color: #fff;
border-bottom: 1px solid #ebebeb;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

You have to show us the html my man. I can't guess if I don't see it. A codepen or a fiddler would be even better. That way we can figure out what's the problem and help you if possible. — Jabberwocky, Jul 23 '18 at 14:02
Please share HTML also for this...in btw check this fiddle and let me whether this what you need or not https://jsfiddle.net/Aravi/p7z05suj/ — Aravind S, Jul 23 '18 at 16:37
I have set z-index 101 but i am getting like this:https://jsfiddle.net/p7z05suj/17/ — Apple Orange, Jul 23 '18 at 17:01

score 1 · Accepted Answer · answered Jul 23 '18 at 22:27

1

You can try this bro.

Popup Overlay CSS:

.overlay {
position:absolute;
z-index:105;
}

Header CSS:

.header {
  overflow:hidden;
}

answered Jul 23 '18 at 22:27

Selahaddin Ünügür

26
4

Jon Wyatt · Answer 2 · 2018-07-24T11:53:12.603

0

You header and your overlay both have the same z-index value. If you want the overlay to appear over the header, increase the z-index value of your overlay.

.overlay {
    z-index: 101;
    position: absolute;
    //other css
}

.header {
    z-index: 100;
    //other css
}

Alternatively you could lower the z-index value of .header instead. Whicever makes most sense to your overall styling rules.

Edit: Have updated my answer to also include changes to the positioning of the overlay (based on the fiddle you linked in the other comment).

edited Jul 24 '18 at 11:53

answered Jul 23 '18 at 14:49

Jon Wyatt

79
6

It's going to be hard to help without more information or a working example of the issue. You could try reading [this question](https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning) to see if it's related to the fact you're using `position: fixed;`. – Jon Wyatt Jul 23 '18 at 15:27

How to resolve popup overlay issue

2 Answers2