I am writing a web application and I’m having trouble with one part, where I have a rollover thing, but it’s currently rolling under. EDIT: pastehtml was rejected, here is jfiddle: http://jsfiddle.net/XmKwt/1/
The right div goes under the left div, even though the z-index says it should not.
I have found that if the “position:relative;” css is removed (see source) then it works just fine, but I don’t understand why and I need the “position:relative;” css there for other reasons, not demonstrated in this simplified example.
<!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">
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
/* Remove this line and it works */
#featureleft {position:relative;}
/* End */
#layoutdiv { text-align: left; width: 940px; }
#featureleft { width: 580px; float: left;z-index:10; background:red; }
#featureright { float: right; z-index:100;}
#copypaste { background-color: #bbb; margin-bottom: 40px; padding-right: 10px; padding-left: 10px; width: 300px; height:200px; margin-left: 20px; border: solid 5px #000; }
</style>
<script language='javascript'>
$(document).ready(function() {
$('#copypaste').mouseenter(function(){
p=$(this).position();
// increase/move by p.left
move=Math.round(p.left)-0;
width=parseInt($(this).css('width'))+parseInt(move);
margin=0-(parseInt(move)-20);
inputs=parseInt(move)+280;
$(this).css('width',width+'px').css('margin-left',margin+'px').css('height',$(this).height);
});
$('#copypaste').mouseleave(function(){
$(this).css('width','300px');
$(this).css('margin-left','20px');
});
});
</script>
</head>
<body>
<div id="layoutdiv" class='container fakewindowcontain'>
<div id='featurewrapper'>
<div id='featureleft'>
<p>Lorem ipsum dolor sit amet, ut eget et enim, nec auctor habitasse eu mattis eget odio, lacinia vivamus libero dictum, tempor nunc nec nam fringilla mauris, et class dolor curabitur ipsum. Commodo ultricies id</p>
</div>
<div id='featureright'>
<div id='copypaste'>
<p>Lorem ipsum dolor sit amet, ut eget et enim, nec auctor habitasse eu mattis eget odio, lacinia vivamus libero dictum, tempor nunc nec nam fringilla mauris, et class dolor curabitur ipsum. Commodo ultricies id</p>
</div>
</div>
</div>
</div>
</body>
</html>
The #featureright div does not have a position declared (and thus it is the same as position: static). As I said in my comment
Therefore, to get it to obey the z-index property, you need to add position: relative to #featureright