Div below shows through div above, regardless of z-index.

Home ›

ASP.NET Forums » General ASP.NET » Client Side Web Development » Div below shows through div above, regardless of z-index.

Shortcuts

Previous Next

Div below shows through div above, regardless of z-index.

Last post 08-20-2008 12:20 AM by Lance Zhang - MSFT. 1 replies.

Sort Posts:

Div below shows through div above, regardless of z-index.

08-15-2008, 4:32 PM

Contact

12 point Member
rvarcher
Member since 09-10-2007, 8:32 PM
Posts 5

Trying to setup a simple 'menu' that appears when you mouse over a div. The divs that you mouse over are stacked vertically. The absolute div is positioned underneath. When mouse over the 'menu' div appears but the divs below show through. This happens regardless of z-index. Here's a stripped down version of my code. Example can be seen here.

1    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3    
4    <head>
5    <script language="javascript" type="text/javascript" >
6    function MakeVisibilityHidden(elementName)
7    {
8        var el = document.getElementById(elementName);
9        el.style.visibility = 'hidden';
10   }
11   function MakeVisibilityVisible(elementName)
12   {
13       var el = document.getElementById(elementName);
14       el.style.visibility = 'visible';
15   }
16   </script>
17   
18   <p style="font-size: 11pt;">
19   Problem is div underneath shows through. This happens even when z-index is set so it should not. This happens in IE6 and FF2 if I define
20   a z-index for both divs. Problem is fixed in FF2 if I don't define a z-index for the containing div (the relative defined div). I can't
21   figure this out. Please help. rvarcher1 at the yahoo dot com
22   </p>
23   
24   <style type="text/css">
25   body {
26     font-size: 10pt;
27     font-family: Arial;
28   }
29   .CssPopUpMenuContainer {
30     height: 20px;
31     position: relative;
32     z-index: 98;
33   }
34   .CssPopUpMenuContainerWithoutZIndex {
35     height: 20px;
36     position: relative;
37   }
38   .CssPopUpMenu {
39     position: absolute;
40     display: block;
41     visibility: hidden;
42     width: 300px;
43     background-color: #EEEEEE;
44     padding: 2px;
45     top: 19px;
46     left: 0px;
47     border: solid 1px #AAAAAA;
48     z-index: 99;
49   }
50   </style>
51   
52   <title>Banging Head Against Wall - Hurts Much</title>
53   
54   </head>
55   
56   <body>
57   
58   <br />
59   
60   Here it is with z-index defined on both divs.
61   <br />- Problem exists in IE 6
62   <br />- Problem exists in FF 2
63   <pre>
64   CSS IS:
65   .CssPopUpMenuContainer {
66     height: 20px;
67     position: relative;
68     z-index: 98;
69   }
70   .CssPopUpMenu {
71     position: absolute;
72     display: block;
73     visibility: hidden;
74     width: 300px;
75     background-color: #EEEEEE;
76     padding: 2px;
77     top: 19px;
78     left: 0px;
79     border: solid 1px #AAAAAA;
80     z-index: 99;
81   }
82   </pre>
83   <table cellspacing="0" cellpadding="3" rules="all" border="1"
84          style="background-color:White; font-size:9pt; border-collapse:collapse;">
85   <tr>
86   <td>
87   <div id="PopUpMenuContainer1" class="CssPopUpMenuContainer"
88   	 onmouseover='MakeVisibilityVisible("PopUpMenu1"); this.style.backgroundColor="silver";'
89   	 onmouseout='MakeVisibilityHidden("PopUpMenu1"); this.style.backgroundColor="Transparent";' >
90   	MouseOverHere
91   	<div id="PopUpMenu1" class="CssPopUpMenu" >
92   		<p>Line 1 - My awesome popup menu.</p>
93   		<p>Line 2 - I sure wish I could figure this out.</p>
94   		<p>Line 3 - Why is this so hard?</p>
95   	</div>
96   </div>
97   </td>
98   </tr>
99   <tr>
100  <td>
101  <div id="PopUpMenuContainer2" class="CssPopUpMenuContainer"
102  	 onmouseover='MakeVisibilityVisible("PopUpMenu2"); this.style.backgroundColor="silver";'
103  	 onmouseout='MakeVisibilityHidden("PopUpMenu2"); this.style.backgroundColor="Transparent";' >
104  	MouseOverHere
105  	<div id="PopUpMenu2" class="CssPopUpMenu" >
106  		<p>Line 1 - My awesome popup menu.</p>
107  		<p>Line 2 - I sure wish I could figure this out.</p>
108  		<p>Line 3 - Why is this so hard?</p>
109  	</div>
110  </div>
111  </td>
112  </tr>
113  <tr>
114  <td>
115  <div id="PopUpMenuContainer3" class="CssPopUpMenuContainer"
116  	 onmouseover='MakeVisibilityVisible("PopUpMenu3"); this.style.backgroundColor="silver";'
117  	 onmouseout='MakeVisibilityHidden("PopUpMenu3"); this.style.backgroundColor="Transparent";' >
118  	MouseOverHere
119  	<div id="PopUpMenu3" class="CssPopUpMenu" >
120  		<p>Line 1 - My awesome popup menu.</p>
121  		<p>Line 2 - I sure wish I could figure this out.</p>
122  		<p>Line 3 - Why is this so hard?</p>
123  	</div>
124  </div>
125  </td>
126  </tr>
127  </table>
128  
129  <br /><hr /><br />
130  
131  Here it is with z-index removed on the div you move your mouse over.
132  <br />- Problem still exists in IE 6
133  <br />- Problem is fixed in FF 2
134  <pre>
135  CSS IS:
136  .CssPopUpMenuContainerWithoutZIndex {
137    height: 20px;
138    position: relative;
139  }
140  .CssPopUpMenu {
141    position: absolute;
142    display: block;
143    visibility: hidden;
144    width: 300px;
145    background-color: #EEEEEE;
146    padding: 2px;
147    top: 19px;
148    left: 0px;
149    border: solid 1px #AAAAAA;
150    z-index: 99;
151  }
152  </pre>
153  <table cellspacing="0" cellpadding="3" rules="all" border="1"
154         style="background-color:White; font-size:9pt; border-collapse:collapse;">
155  <tr>
156  <td>
157  <div id="PopUpMenuContainer4" class="CssPopUpMenuContainerWithoutZIndex"
158  	 onmouseover='MakeVisibilityVisible("PopUpMenu4"); this.style.backgroundColor="silver";'
159  	 onmouseout='MakeVisibilityHidden("PopUpMenu4"); this.style.backgroundColor="Transparent";' >
160  	MouseOverHere
161  	<div id="PopUpMenu4" class="CssPopUpMenu" >
162  		<p>Line 1 - My awesome popup menu.</p>
163  		<p>Line 2 - I sure wish I could figure this out.</p>
164  		<p>Line 3 - Why is this so hard?</p>
165  	</div>
166  </div>
167  </td>
168  </tr>
169  <tr>
170  <td>
171  <div id="PopUpMenuContainer5" class="CssPopUpMenuContainerWithoutZIndex"
172  	 onmouseover='MakeVisibilityVisible("PopUpMenu5"); this.style.backgroundColor="silver";'
173  	 onmouseout='MakeVisibilityHidden("PopUpMenu5"); this.style.backgroundColor="Transparent";' >
174  	MouseOverHere
175  	<div id="PopUpMenu5" class="CssPopUpMenu" >
176  		<p>Line 1 - My awesome popup menu.</p>
177  		<p>Line 2 - I sure wish I could figure this out.</p>
178  		<p>Line 3 - Why is this so hard?</p>
179  	</div>
180  </div>
181  </td>
182  </tr>
183  <tr>
184  <td>
185  <div id="PopUpMenuContainer6" class="CssPopUpMenuContainerWithoutZIndex"
186  	 onmouseover='MakeVisibilityVisible("PopUpMenu6"); this.style.backgroundColor="silver";'
187  	 onmouseout='MakeVisibilityHidden("PopUpMenu6"); this.style.backgroundColor="Transparent";' >
188  	MouseOverHere
189  	<div id="PopUpMenu6" class="CssPopUpMenu" >
190  		<p>Line 1 - My awesome popup menu.</p>
191  		<p>Line 2 - I sure wish I could figure this out.</p>
192  		<p>Line 3 - Why is this so hard?</p>
193  	</div>
194  </div>
195  </td>
196  </tr>
197  </table>
198  
199  </body>
200  </html>

Re: Div below shows through div above, regardless of z-index.

08-20-2008, 12:20 AM

Contact

Answer

33,090 point All-Star
Lance Zhang - MSFT
Member since 05-25-2008, 10:44 PM
Posts 2,361

Hi rvarcher

Actually, the issue is due to that, the PopUpMenu DIV is including in the PopUpMenuContainer DIV, and if we move the PopUpMenu DIV out of the PopuoMenuContainer DIV and position the PopUpMenu DIV with absolute localization, the issue will be solved.

Please try the following code; it will work in Internet Explorer (in this demo, I position the pop up DIV by window.event, which is not supported by Firefox, so please implement your own position mechanism):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
<script language="javascript" type="text/javascript" >
function MakeVisibilityHidden(elementName)
{
    var el = document.getElementById(elementName);
    el.style.visibility = 'hidden';
    el.style.left=event.clientX+document.body.scrollLeft+10;
    el.style.top=event.clientY+document.body.scrollTop+10;
}
function MakeVisibilityVisible(elementName)
{
    var el = document.getElementById(elementName);
    el.style.visibility = 'inherit';
}
</script>

<style type="text/css">
body {
  font-size: 10pt;
  font-family: Arial;
}
.CssPopUpMenuContainer {
  height: 20px;
  position: relative;
  z-index: 98;
}
.CssPopUpMenuContainerWithoutZIndex {
  height: 20px;
  position: relative;
  clear: both;
}
.CssPopUpMenu {
  position: absolute;
  display: block;
  visibility: hidden;
  width: 300px;
  background-color: #EEEEEE;
  padding: 2px;
  top: 19px;
  left: 0px;
  border: solid 1px #AAAAAA;
  z-index: 99;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="3" rules="all" border="1"
       style="background-color:White; font-size:9pt; border-collapse:collapse;">
<tr>
<td>
<div id="PopUpMenuContainer4" class="CssPopUpMenuContainerWithoutZIndex"
	 onmouseover='MakeVisibilityVisible("PopUpMenu4",event); this.style.backgroundColor="silver";'
	 onmouseout='MakeVisibilityHidden("PopUpMenu4"); this.style.backgroundColor="Transparent";'>
	MouseOverHere
</div>
	<div id="PopUpMenu4" class="CssPopUpMenu" >
		<p>Line 1 - My awesome popup menu.</p>
		<p>Line 2 - I sure wish I could figure this out.</p>
		<p>Line 3 - Why is this so hard?</p>
	</div>
</td>
</tr>
<tr>
<td>
<div id="PopUpMenuContainer5" class="CssPopUpMenuContainerWithoutZIndex"
	 onmouseover='MakeVisibilityVisible("PopUpMenu5",event); this.style.backgroundColor="silver";'
	 onmouseout='MakeVisibilityHidden("PopUpMenu5"); this.style.backgroundColor="Transparent";'>
	MouseOverHere
</div>
	<div id="PopUpMenu5" class="CssPopUpMenu" >
		<p>Line 1 - My awesome popup menu.</p>
		<p>Line 2 - I sure wish I could figure this out.</p>
		<p>Line 3 - Why is this so hard?</p>
	</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

</body>
</html>

If I’ve misunderstood the facing problem, please feel free to let me know.

Thanks.

Lance Zhang

Page 1 of 1 (2 items)

RSS Available