2

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

右边的 div 位于左边的 div 之下，即使 z-index 说它不应该。

我发现如果“位置：相对；” 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>
4

1 回答 1

3

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

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

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

于 2012-05-02T17:27:21.600 回答