Hi,
I am using the following test. In firefox/chrome/safari on my mac, panel1 renders above panel2. But on firefox/chrome on my windows machine, it renders underneath.
I want panel1 to be placed directly over panel2. What's the right way to do it?:
<html>
<head>
</head>
<body>
<!-- Appears on top of panel2 in safari/chrome/ff on mac, but underneath on windows. -->
<div id='panel1' style='z-index:6; position:absolute; width:100px; height:100px; background-color:red'>
</div>
<div id='panel2' style='z-index:3; width:100px; height:100px; background-color:yellow'>
</div>
</body>
</html>
I was shown this trick in a previous question. I can't set the top/left position of panel1 (I think) because it's in a larger nest of divs that will move around the screen as the user resizes their browser frame.
Thanks
----------- Update -------------
Tried to explicitly set z-index on both divs, that worked.