I'm currently working on a web application and facing an issue with a rollover effect that is not functioning correctly. When the mouse hovers over an element, it should be displayed on top, but instead, it appears underneath. I have provided a jsfiddle link for better understanding: http://jsfiddle.net/XmKwt/1/
Even though the z-index property is set appropriately, the right div is still appearing below the left div.
Interestingly, when I remove the "position:relative;" CSS from the code (as shown in the source), the rollover effect works as expected. However, removing this CSS property affects other functionalities in my application, which are not evident 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>
/* Removing this line resolves the issue */
#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>