混合浮动和固定定位答案

【问题标题】：Mixing floating and fixed positioning混合浮动和固定定位
【发布时间】：2011-06-12 16:25:00
【问题描述】：

这是 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 像素的恒定距离）？

提前感谢您的帮助。

【问题讨论】：

标签： css position positioning css-float fixed

【解决方案1】：

你能改变标记的结构吗？

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

将 littleDivFixed 嵌套在 littleDiv 内

所以不是

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

你有

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

为固定 div 添加边距

margin-left: 10px;

设置margin 而不是left 可让您保持“自动”左侧定位，同时仍进行相对调整。

【讨论】：

非常感谢这个神奇的技巧。它似乎与 Chrome、Firefox 和 Opera 完美配合。当然，它在 IE8/9 上会失败，但这是意料之中的。
@Serious，很高兴为您提供帮助。我已经完全放弃了 IE，而且更快乐了。

【解决方案2】：

像这样？只需将left 和top 属性添加到fixed div

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>

【讨论】：

感谢您考虑这个问题并说明“jsFiddle”的使用（不知道这个网站）。但我希望左边相对于“bigDiv”div，例如总是 10px，而不是绝对的。
谢谢；确实，通过 JavaScript 初始化，结果是完美的，但是......我不能使用 JavaScript，只能坚持使用 html/css。此外，处理调整大小事件会使事情变得不那么方便。

【解决方案3】：

你也可以只加：

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

并设置：

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

为了正确的布局。

JSFiddle

【讨论】：