If have background-image on div AND z-index, covers child elements!

**6tr6tr** · 05-10-2010 03:48 PM

I've found a weird situation and I'm not sure how best to solve this. If I give a div a z-index (even 0), then no matter what the child elements are hidden by the background-image of the parent div! Even if I go without a background-image, the mouse-over stuff of the child divs is never kicked off sicne they're somehow blocked by the parent divs.

BUT here's what's even weirder:

* If I have the above situation hardcoded in HTML, then the above holds true
* If I dynamically create the child divs (in javascript) after the document is loaded, then it does NOT hold true and instead, they're all visible!!

Any ideas why this occurs?

Code:

<!-- THIS RESULTS IN BACKGROUND IMAGE COVERING CHILD DIV -->

<!-- This has a background-image and a z-index: 0; -->
<div id="parent" class="parent">

     <!-- This has a z-index: 2; -->
     <div id="child" class="child"></div>

</div>


<!-- THIS RESULTS IN CHILD DIV SHOWING OVER BACKGROUND-IMAGE OF PARENT -->

<!-- This has a background-image and a z-index: 0; -->
<div id="parent" class="parent"></div>

<script>
window.onload= function()
{
     var p = document.getElementById( "parent" );

     //Create child div and append to "p"
     ...elided...
}
</script>

**thraddash** · 05-10-2010 04:46 PM

I have tested both your scenarios with the same result.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Positioning</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<style type="text/css">

			.parent {
				position: relative;
				width: 300px;
				height: 300px;
				background-color: red;
				z-index: 0;
				margin-bottom: 10px;
			}
			.child {
				position: absolute;
				width: 150px;
				height: 150px;
				left: 75px;
				top: 75px;
				background-color: blue;
				z-index: 2;
			}

		</style>

	</head>
	<body>

		<!-- HARD CODED -->
		<div class="parent">
			<div class="child"></div>
		</div>

		<!-- DYNAMIC -->
		<div id="parent" class="parent"></div>
		<script type="text/javascript">
			var element = document.createElement('div');
			element.className = 'child';
			document.getElementById('parent').appendChild(element);
		</script>

	</body>
</html>

Please ensure that any element you assign a z-index to has the position property set as well.

Hope this helped.

**6tr6tr** · 05-10-2010 05:35 PM

Originally Posted by thraddash

I have tested both your scenarios with the same result.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Positioning</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<style type="text/css">

			.parent {
				[B][COLOR="Red"]position: relative;[/COLOR][/B]
				width: 300px;
				height: 300px;
				background-color: red;
				z-index: 0;
				margin-bottom: 10px;
			}
			.child {
				position: absolute;
				width: 150px;
				height: 150px;
				left: 75px;
				top: 75px;
				background-color: blue;
				z-index: 2;
			}

		</style>

	</head>
	<body>

		<!-- HARD CODED -->
		<div class="parent">
			<div class="child"></div>
		</div>

		<!-- DYNAMIC -->
		<div id="parent" class="parent"></div>
		<script type="text/javascript">
			var element = document.createElement('div');
			element.className = 'child';
			document.getElementById('parent').appendChild(element);
		</script>

	</body>
</html>

Please ensure that any element you assign a z-index to has the position property set as well.

Hope this helped.

Yours works because you have an ERROR in it. You used position: relative for the parent which means the parent's z-index is ignored.

**thraddash** · 05-10-2010 05:38 PM

:P

position: relative is not an error, it was completely on purpose.

I will let you figure it out now.

**thraddash** · 05-10-2010 05:55 PM

Removed position: relative and used position: absolute instead...
You have to use one of them.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Positioning</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<style type="text/css">

			.parent {
				position: absolute;
				width: 300px;
				height: 300px;
				background-color: red;
				z-index: 0;
				border: solid 1px #000;
			}
			.child {
				position: absolute;
				width: 150px;
				height: 150px;
				left: 75px;
				top: 75px;
				background-color: blue;
				z-index: 2;
			}

		</style>

	</head>
	<body>

		<!-- HARD CODED -->
		<div class="parent" style="left: 0px; top: 0px;">
			<div class="child"></div>
		</div>

		<!-- DYNAMIC -->
		<div id="parent" class="parent" style="left: 150px; top: 150px;"></div>
		<script type="text/javascript">
			var element = document.createElement('div');
			element.className = 'child';
			document.getElementById('parent').appendChild(element);
		</script>

	</body>
</html>

**6tr6tr** · 05-10-2010 06:29 PM

Originally Posted by thraddash

Removed position: relative and used position: absolute instead...
You have to use one of them.

Thank you - I figured out what was wrong with your help! I was BOTH creating dynamically and hardcoding the parent, so I had two versions of it!

Thanks again!

**thraddash** · 05-10-2010 06:32 PM

Ok, your welcome.

Thread: If have background-image on div AND z-index, covers child elements!

Thread Tools

Display

If have background-image on div AND z-index, covers child elements!

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions