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 的位置不是很好（它总是卡在显示屏的左侧）。

_

是否有可能有一个混合两种行为的 div ：

  • 始终在“bigDiv”div 的右侧（固定距离为 10 像素），
  • 始终在显示屏上（与顶部保持 10 像素的恒定距离）？

_

在此先感谢您的帮助。

4

3 回答 3

5

你能改变标记的结构吗？

通过进行两项更改，我得到了您描述的行为（在 Firefox 3.6 中）：

嵌套 littleDivFixed inside littleDiv

所以而不是

    <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中添加一个leftandtop属性fixed

http://jsfiddle.net/t5bK9/

好的，这在 Chrome 和 IE8 中有效（确保它是标准模式，而不是怪癖），但由于某种原因不在 jsFiddle 中。我不知道为什么，但它做你想要的（我认为）。如果您想确保在调整 div 大小时它始终为 10px，您可以向 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>
于 2011-01-20T19:29:52.360 回答
1

您也只能添加：

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

并设置：

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

为正确的布局。

JSFiddle

于 2017-04-21T10:41:09.990 回答