为什么 z-index 不起作用？ [复制]答案

【问题标题】：Why doesn't z-index work? [duplicate]为什么 z-index 不起作用？ [复制]
【发布时间】：2012-05-02 17:08:25
【问题描述】：

我正在编写一个 Web 应用程序，但我在某个部分遇到了问题，我有一个翻转的东西，但它目前正在滚动。编辑：pastehtml 被拒绝，这里是 jfiddle：http://jsfiddle.net/XmKwt/1/

右 div 位于左 div 之下，尽管 z-index 表明它不应该。

我发现如果 "position:relative;" css 被删除（参见源代码）然后它工作得很好，但我不明白为什么，我需要“位置：相对；” 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>

【问题讨论】：

高风险网站被阻止位置：pastehtml.com/view/bwqlq812t.html 访问已被阻止，因为在该网站上发现了威胁 Mal/HTMLGen-A。
您的 pastehtml 链接无效。对于它的价值，CSS z-index 属性在没有除静态（默认）以外的位置的元素上被忽略。
您的链接也不适合我。你应该试试jsfiddle.net。
@Diodeus 在这里相同，我编辑了链接。 BenHolness 请在问题中发布代码。您提供的链接显示为恶意链接。
链接对我有用，但基本上是的，“CSS z-index 属性在除了静态（默认）之外没有位置的元素上被忽略。”有点答案..

标签： javascript jquery html css

【解决方案1】：

#featureright div 没有声明位置（因此它与 position: static 相同）。正如我在评论中所说的那样

"CSS z-index 属性在没有静态以外的位置（默认）"

因此，要使其服从 z-index 属性，您需要添加 position: relative to #featureright

【讨论】：

编辑：但是如果你添加 position: relative，你的 mouseenter 函数将不起作用，除非你将 p = $(this).position() 更改为 p = $(this).offset( )...但无论如何，这都是一大堆乱七八糟的代码...
添加 position:relative to #featureright 会阻止翻转工作。我想我需要找到一种不同的方式来实现这一目标。
只需将position: relative 和z-index:100 添加到#copypaste 而不是#featureright