2

私は 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>
4

1 に答える 1

3

#featureright div には位置が宣言されていません (したがって、position: static と同じです)。私のコメントで言ったように

「CSS z-index プロパティは、静的 (デフォルト) 以外の位置を持たない要素では無視されます」

したがって、z-index プロパティに従うようにするには、position: relative to #featureright を追加する必要があります。

于 2012-05-02T17:27:21.600 に答える