Z-index, max?

HTML & CSS
1

Hi,

Is there any max-value for z-index? I have a fixed header with a z-index of 99… then i have full-page overlay that opens upon clicking a button… and this one have a z-index of 999. Still the header is shown on top.

why is this?

2

Using a z-index over 99 is very dangerous, as the power it requires to render it can actually overheat the browser and melt the screen. So be very careful.

No, not really. :slight_smile:

You’ll need to show us an example so we can explain what’s going wrong. But you can set a z-index of a million and it may do nothing much if its parent has a low z-index.

3

. then i have full-page overlay that opens upon clicking a button… and this one have a z-index of 999. Still the header is shown on top.

Ultimately its the positioned parent of an element that determines the stacking index of all the children no matter what their z-index. If a positioned parent has a z-index other than auto (say z-index:1 for example) then it will be no use having a child with a z-index of 1 million as it will not overlay an element outside this current context where that other element only has a z-index of 2. The child with a z-index of one million will of course be on top of all the other elements within it’s parent’s context; but outside the parent’s context the child’s z-index will be the same as the parent.

So what this means is that you must go up the dom from the element you are testing and make sure that if there is a positioned parent then its these parents you must address for the stacking order. Also note that only positioned elements can have a z-index applied. If you apply a z-index to a non positioned element then it is ignored. This means for static elements you must add position:relative (without coordinates) for the element to partake in the stacking strategy.

lol :slight_smile:

Browsers do have number limits and in Firefox the z-index limit is 2147483647. Try increasing it in Firebug and you will see it won’t go any higher.

There are similar limits for dimensions and margins etc. (This used to be the margin limit in opera ‘margin-top:-32767px;’.)

IE has limits on css rules.

4

Hmm okey, new info for me=)

But is there any way to force what I want? Or do it with JS maybe?

My structure looks something like this:

<header></header>

<div>
<div>
<div class="overlay"></div>
</div>
</div>

Where <header> beeing fixed at top with a z-index of 2 and .overlay beeing fixed with to top with z-index: 3. Both the parents of the .overlay has position: relative.

5

Let’s start with an example: :slight_smile:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:100px;
	background:red;
	color:#fff;
	font-size:24px;
	text-align:center;
	z-index:99;
}
.overlay {
	z-index:999;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.7);
	color:#fff;
	font-size:80px;
	text-align:center;
}
</style>
</head>

<body>
<header>I am a header</header>
<div>
		<div>
				<div>
						<div class="overlay">I am the overlay</div>
				</div>
		</div>
</div>
</body>
</html>

The overlay is now on top of the header as you wanted.

However if any of the parents of the overlay have a z-index lower than 99 and position:relative applied then the overlay will not cover the header. If you apply a z-index of 100 to the parent of the overlay (and position:relative) then the overlay will once again cover the header. However, it looks like you want a fixed header and when you now scroll the page the whole page content will go on top of the header and cover it up.

The only way you can achieve that is by my example code above where you have no parent of the overlay div occupying a z-index. It is not possible to make a child higher than the parents z-index where the parent’s z-index has been set as already mentioned. In ‘spec’ terms the element becomes ‘atomic’.

There is another solution if the above is not possible and that is to remove the overlay form its current context. The overlay is a fixed element and assuming you are doing what I think then it does not need to be in that structure.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:100px;
	background:red;
	color:#fff;
	font-size:24px;
	text-align:center;
	z-index:99;
}
.overlay {
	z-index:999;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.7);
	color:#fff;
	font-size:80px;
	text-align:center;
}
</style>
</head>

<body>
<header>I am a header</header>
<div>
		<div>
				<div> </div>
		</div>
</div>
<div class="overlay">I am the overlay</div>
</body>
</html>

There is no need for fixed elements to be in a structure because ‘fixed’ always refers to the viewport unless you are attempting auto positioning which doesn’t seem to be the case here.

If none of the above helps then you will need to post a working demo of the problem so that we can offer specific code.

6

Thanks but in this particular thing i do need to have the overlay inside the parents, because the parent in this case is a <li> that is a part of an image-slider. Inside this <li> there is an img, and when this image is clicked the overlay appears with a high-res version of the image that overlays the whole screen.

Couldnt I just change the CSS of the header when clicking the “show overlay” button, setting the header z-index to 0, and then changing it back when you click down the overlay?

I am a noob at js and jquery but i tried this, however, it won’t close the overlay on click:

$('.show-overlay').on('click', function(){
	$('header').removeClass('headerZindex');
	$('.overlay').show();
	$('.overlay').on('click', function(){
		$('header').addClass('headerZindex');
		$(this).hide();
	});
});
7

HI,

Seems to work for me:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>
header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:100px;
	background:red;
	color:#fff;
	font-size:24px;
	text-align:center;
}
.headerZindex { z-index:99; }
.overlay {
	z-index:999;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.7);
	color:#fff;
	font-size:80px;
	text-align:center;
}
.overlay { display:none }
.wrap {
	position:relative;
	z-index:1;
	padding-top:150px;
}
.show-overlay:hover {
	cursor:pointer;
	color:red
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
<header class="headerZindex">I am a header</header>
<div class="wrap">
		<div>
				<div>
						<div class="show-overlay">Show overlay</div>
						<div class="overlay">I am the overlay</div>
				</div>
		</div>
</div>
<script>
$('.show-overlay').on('click', function(){
	$('header').removeClass('headerZindex');
	$('.overlay').show();
	$('.overlay').on('click', function(){
		$('header').addClass('headerZindex');
		$(this).hide();
	});
});

</script>
</body>
</html>
8

Yes you are right, it works, I had the .show-overlay as parent to .overlay, but when I changed that it worked.

Thanks for the help! Appreciated!