私は Web アプリケーションを作成していますが、ロールオーバーの問題がある部分で問題が発生していますが、現在はローリング ダウン中です。編集: pastehtml は拒否されました。ここに jfiddle があります: http://jsfiddle.net/XmKwt/1/
z-index はそうすべきではないと言っていますが、右の div は左の div の下に入ります。
「position:relative;」の場合、css を削除すると (ソースを参照)、問題なく動作しますが、理由がわかりません。「position:relative;」が必要です。この簡略化された例では示されていませんが、他の理由で css があります。
<!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>