2

私はマルチデバイス Web ページで作業しています。div (.carrousel) ウィッチの CSS トランジションを作成したいと考えています。これには、float left を使用して水平方向に配置された 3 つの他の div (.bloc1 から 3) が含まれています。最初に、div 2 と 3 のみが表示されます ( negatif は .carrousel に残され、overflow はコンテナー .global に隠されています) リンク 'Show blocks {1, 2}' をクリックすると、.carousel が右に移動し、これらのブロックが表示されます 移行がスムーズに行われるように、HTML を採用しました下の構造。問題は、固定要素が Chrome、IE8、Android 4.03 および 3.02 で正しく配置されていないことですが、Firefox 15.0、IE9、および IE7 では! 物事はうまくいっています...トランジション効果はそのままなので、HTML構造を変更することについての提案は大歓迎です...しかし、デバイスごとにいくつかのハックや特定の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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
    <style type="text/css">

        * { margin:0; padding:0; }
        a img { border:none; }
        body { font-family:Tahoma; font-size:12px; }
        p { margin:10px 0; }

        .global { width:940px; overflow:hidden; position:relative; margin:20px auto; border:#F00 solid 1px; }

        .carrousel { width:1660px; overflow:hidden; position:relative; top:0;
            -webkit-transition: left .2s ease-in-out;
            -moz-transition: left .2s ease-in-out;
            -ms-transition: left .2s ease-in-out;
            -o-transition: left .2s ease-in-out;
            transition: left .2s ease-in-out; }

        .bloc { float:left; padding:5px; margin:5px; text-aligh:center; }               

        .bloc1 { width:700px; height:400px; background-color:#F00; }

        .bloc2 { width:200px; height:300px; background-color:#999; }
        .nav { position:fixed; z-index:2; background-color:#F90; width:200px; }
        .nav a { display:block; margin:10px 0; }


        .bloc3 { width:700px; min-height:300px; position:relative; background-color:#FF0; }
        .header { width:700px; height:50px; position:fixed; z-index:2; background-color:#6FF; }
        .list { height:3000px; padding-top:50px; position:relative; z-index:1; background-color:#9C3; }

        .carrousel.showblocs23 { left:-720px; }

        .carrousel.showblocs12 { left:0; }
        .carrousel.showblocs12 .header { position:relative; }           

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <title>blocr</title>

</head>

<body>

    <div class="global">

        <div class="carrousel showblocs23">  

            <div class="bloc bloc1">
            bloc 1              
            </div>

            <div class="bloc bloc2">
            bloc 2
                <div class="nav">
                fixed nav<br />
                    <a href="#" onclick="$('.carrousel').removeClass('showblocs23').addClass('showblocs12'); return false;">
                    Show blocs {1, 2}
                    </a>                                
                    <a href="#" onclick="$('.carrousel').removeClass('showblocs12').addClass('showblocs23'); return false;">
                    Show blocs {2, 3}
                    </a>
                </div>                
            </div>

            <div class="bloc bloc3">

            bloc 3

                <div class="header">
                    bloc 3 header fixed
                </div>

                <div class="list">
                    bloc 3 long list
                </div>

            </div>

        </div><!-- /carrousel --> 

    </div><!-- /global -->

</body>
</html>
4

1 に答える 1

2

あなたの意図を誤解しない限り、ここには2つの主な問題があります。

  1. ミックスabsoluteしてfixedポジショニングしたようです。このposition: fixedプロパティにより、要素は、その親 div ではなく、ブラウザ ウィンドウに対して相対的に配置されます。andクラスを探していposition: absoluteます。.header.list

  2. z-index必要のない場所で使用している。z-indexすべてのクラスからプロパティを削除できます。これにより、別の問題が明らかになり、.listクラスmargin-top: 50pxにはpadding-top: 50px. パディングは要素の境界線内の領域を埋めますが、マージンは要素の境界線の外側に目に見えないマージンを作成します。marginとpaddingの詳細については、w3 スクールを参照してください。

作業コードの JSFiddle は次のとおりです: http://jsfiddle.net/sjAcV/

元のコードの JSFiddle は次のとおりです: http://jsfiddle.net/VVZrg/

于 2013-01-30T18:22:54.357 に答える