Question

此处标准使用浮动和已修复：

<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滚动但没有很好地定位（它总是卡在显示屏的左侧）。

_

是否可以使用混合这两种行为的div：

始终位于“bigDiv”div的右侧（距离为10px），
始终在显示屏上（距离顶部10px的恒定距离）？

_

提前感谢您的帮助。

Answer 1

喜欢这个？只需在left div

中添加top和fixed属性即可

http://jsfiddle.net/t5bK9/

好的，这适用于Chrome和IE8（确保它是标准模式，而不是怪癖），但出于某些原因不在jsFiddle中。我不确定为什么，但它会做你想要的（我想）。如果你想确保它总是10px，以防div调整大小，你可以向bigDiv添加一个onResize监听器来重新调用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>

Answer 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可让您保持“自动”左侧定位，同时仍进行相对调整。

Answer 3

您也可以只添加：

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

并设置：

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

正确的布局。

JSFiddle

混合浮动和固定定位

3 个答案: