7

これがfloatとfixedの標準的な使用法です：

<html>
<head>
    <style type="text/css">
        #bigDiv
        {
            background-color: red;
            height: 2000px;
            width: 100px;
            float: left;
        }
        #littleDiv
        {
            background-color: green;
            height: 400px;
            width: 200px;
            float: left;            
        }
        #littleDivFixed
        {
            background-color: blue;
            height: 100px;
            width: 200px;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="bigDiv">
    </div>
    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>
</body>
</html>

_

  • 「littleDiv」divは「bigDiv」divの右側にありますが、スクロールには従いません。
  • 反対に、「littleDivFixed」divはスクロールしますが、「bigDiv」divに対して適切に配置されていません（常にディスプレイの左側に固定されています）。

_

2つの動作を混合するdivを持つことは可能ですか？

  • 常に「bigDiv」divの右側（10pxの一定距離）、
  • 常にディスプレイに表示されます（上から10pxの一定の距離にあります）？

_

よろしくお願いします。

4

3 に答える 3

5

マークアップの構造を変更できますか？

2つの変更を加えることで、（Firefox 3.6で）説明した動作を取得しました。

littleDivの内部にlittleDivFixedをネストします

だから代わりに

    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>

あなたが持っている

    <div id="littleDiv">
        <div id="littleDivFixed">
        </div>
    </div>

固定divにマージンを追加します

margin-left: 10px;

margin代わりに設定するとleft、相対的な調整を行いながら、「自動」左位置を維持できます。

于 2011-01-20T20:15:01.510 に答える
4

このような？divにaleftとtop属性を追加するだけですfixed

http://jsfiddle.net/t5bK9/

わかりました。これはChromeとIE8で機能します（癖ではなく標準モードであることを確認してください）が、何らかの理由でjsFiddleでは機能しません。理由はわかりませんが、あなたが望むことをします（私は思います）。divのサイズが変更された場合に備えて常に10pxであることを確認したい場合は、onResizeリスナーをbigDivに追加して、positFix関数を再度呼び出すことができます。

<html>
    <head>
        <style>
            #bigDiv {
                border: 1px solid red;
                height: 2000px;
                width: 100px;
                float: left;
            }
            #littleDiv {
                border: 1px solid green;
                height: 400px;
                width: 200px;
                float: left;            
            }
            #littleDivFixed {
                border: 1px solid blue;
                height: 100px;
                width: 200px;
                top: 10px;
                position: fixed;
            }
        </style>
        <script type="text/javascript">
            function $(elem) {
                return document.getElementById(elem);
            }
            function positFix() {
                $('littleDivFixed').style.left = $('bigDiv').offsetWidth + 10;
            }
        </script>
    </head>
    <body>
        <div id="bigDiv">
        </div>
        <div id="littleDiv">
        </div>
        <div id="littleDivFixed">
        </div>
        <script type="text/javascript">
            positFix();
        </script>
    </body>
</html>
于 2011-01-20T19:29:52.360 に答える
1

追加できるのは次のとおりです。

#littleDivFixed {
    ...
    top: 10px;
    left: 110px;
}

と設定：

body {
  width: 310px;
  margin: 0;
}

正しいレイアウトのために。

JSFiddle

于 2017-04-21T10:41:09.990 に答える