2

我正在开发一个多设备网页，我想对一个 div（.carrousel）进行 CSS 转换，其中包含 3 个其他 div（.bloc1 到 3），使用左浮动水平放置首先，只显示 div 2 和 3（ negatif 留在 .carrousel 上，溢出隐藏在容器上下面的结构。问题是固定元素在 Chrome、IE8、Android 4.03 和 3.02 中没有正确定位，但在 Firefox 15.0、IE9 和 IE7 下！一切运行良好...欢迎任何有关更改 HTML 结构的建议，因为过渡效果保持不变...但我不想通过设备使用一些 hack 或特定 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

这里有两个主要问题，除非我误解了你的意图。

  1. 看来你已经混合absolute和fixed定位了。该position: fixed属性使元素相对于浏览器窗口定位，而不是其父 div。您正在寻找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 回答