混合使用浮动和固定定位

Question

混合使用浮动和固定定位

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的右侧（与"bigDiv" div保持10px的距离），
始终在显示器上（距离顶部保持10px的距离）？

_

非常感谢您的帮助。

- Pragmateek

3个回答

4

像这样？只需将 fixed div 添加一个 left 和 top 属性即可。 http://jsfiddle.net/t5bK9/ 好的，这在 Chrome 和 IE8 中可以工作（确保它是标准模式，而不是怪异模式），但出于某种原因，在 jsFiddle 中却无法工作。我不确定为什么，但它可以实现你想要的效果（我想）。如果你想确保它始终向右偏移 10 像素以防 div 被重新调整大小，你可以添加一个 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>

- josh.trow

感谢您考虑这个问题并说明了“jsFiddle”的使用（我之前不知道这个网站）。但是，我希望左侧相对于“bigDiv” div是相对的，例如始终为10px，而不是绝对的。 - Pragmateek

谢谢；确实使用JavaScript初始化结果完美无缺，但是...我不能使用JavaScript，只能坚持使用html/css。此外，处理调整大小事件会使事情变得有些不方便。 - Pragmateek

1

您也可以只添加：

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

并设置：

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

用于正确布局。

JSFiddle

- simhumileco

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- harpo · Accepted Answer

你能改变标记结构吗？

我通过做出两个改变得到了你描述的行为（在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 可以让你保持 "auto" 左侧定位的同时，仍然进行相对调整。