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

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?




<div id="parent" class="parent">


<div id="child" class="child"></div>

</div>




<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.

<!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>


<div class="parent">
<div class="child"></div>
</div>


<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

I have tested both your scenarios with the same result.

<!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>


<div class="parent">
<div class="child"></div>
</div>


<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.

<!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>


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


<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

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! :rolleyes:

Thanks again!

thraddash

05-10-2010, 06:32 PM

:D

Ok, your welcome.