Question

我正在编写一个Web应用程序，而且我遇到了一个部分出现问题，我有翻转的事情，但它目前正在进行中。编辑：pastehtml被拒绝，这里是jfiddle：http://jsfiddle.net/XmKwt/1/

正确的div位于左侧div之下，即使z-index表示它不应该。

我发现如果＆＃34;位置：相对;＆＃34; css被删除（参见来源）然后它工作正常，但我不明白为什么，我需要＆＃34;位置：相对;＆＃34; 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>

Answer 1

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

“在没有的元素上忽略CSS z-index属性静态以外的位置（默认）“

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

为什么z-index不起作用？

1 个答案: