Javascript 为什么'；t z-指数工作？
我正在编写一个web应用程序，其中一个部分遇到了问题，我有一个滚动的东西，但它目前正在滚动。编辑：pastehtml被拒绝，以下是JFIDLE： 右div位于左div之下，尽管z-index表示不应该 我发现，如果删除了“position:relative；”css（参见源代码），那么它就可以正常工作，但我不明白为什么，我需要“position:relative；”css还有其他原因，在这个简化的示例中没有演示Javascript 为什么'；t z-指数工作？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在编写一个web应用程序，其中一个部分遇到了问题，我有一个滚动的东西，但它目前正在滚动。编辑：pastehtml被拒绝，以下是JFIDLE： 右div位于左div之下，尽管z-index表示不应该 我发现，如果删除了“position:relative；”css（参见源代码），那么它就可以正常工作，但我不明白为什么，我需要“position:relative；”css还有其他原因，在这个简化的示例中没有演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
<!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>
/*拆下这条线，它就会工作*/
#featureleft{位置：相对；}
/*结束*/
#layoutdiv{文本对齐：左；宽度：940px；}
#featureleft{宽度：580px；浮点：左；z索引：10；背景：红色；}
#featureright{float:right；z-index:100；}
#复制粘贴{背景色：#bbb；页边距底部：40px；右侧填充：10px；左侧填充：10px；宽度：300px；高度：200px；左侧边距：20px；边框：实心5px#000；}
$（文档）.ready（函数（）{
$（“#复制粘贴”）.mouseenter（函数（）{
p=$（this.position（）；
//增加/向左移动
移动=数学圆（p.left）-0；
宽度=parseInt（$（this）.css（'width'））+parseInt（move）；
边距=0-（parseInt（move）-20）；
输入=parseInt（move）+280；
$（this）.css（'width'，width+'px'）.css（'margin-left'，margin+'px'）.css（'height'，$（this）.height）；
});
$（“#复制粘贴”）.mouseleave（函数（）{
$（this.css（'width'，'300px'）；
$（this.css（'margin-left'，'20px'）；
});
});
Lorem ipsum dolor sit amet，ut eget et enim，nec auctor Habitase eu mattis eget odio，lacinia vivamus libero dictum，临时NUC nec nam fringilla mauris，et class dolor curabitur ipsum。ultricies通用id
Lorem ipsum dolor sit amet，ut eget et enim，nec auctor Habitase eu mattis eget odio，lacinia vivamus libero dictum，临时NUC nec nam fringilla mauris，et class dolor curabitur ipsum。ultricies通用id
因此，要使其遵守z-index属性，您需要添加位置：相对于#featureright高风险网站阻止位置：pastehtml.com/view/bwqlq812t.html访问已被阻止，因为在该网站上发现了威胁Mal/HTMLGen-A。您的pastehtml链接不起作用。值得一提的是，cssz-index属性在除静态（默认）之外没有其他位置的元素上被忽略。您的链接也不适用于我。你应该试试看。同样的，我删掉了链接。BenHolness请在问题中张贴代码。您提供的链接显示为恶意链接。链接对我来说是有效的，但基本上是肯定的，“CSS z-index属性在没有位置的元素上被忽略，而不是静态的（默认）。”这是一个回答..编辑：但是如果您添加position:relative，您的mouseenter函数将不起作用，除非您将p=$（此）。position（）更改为p=$（这个）.offset（）…但那毕竟是一大堆乱七八糟的代码…添加position:relative to#featureright会阻止滚动。我想我需要找到一种不同的方法来实现这一点。只需将
position:relativez-index:100而不是\featureright