Css 浮动定位与固定定位的混合_Css_Position_Positioning_Css Float_Fixed

Css 浮动定位与固定定位的混合

css

Css 浮动定位与固定定位的混合,css,position,positioning,css-float,fixed,Css,Position,Positioning,Css Float,Fixed,以下是浮动和固定的标准用法： <html> <head> <style type="text/css"> #bigDiv { background-color: red; height: 2000px; width: 100px; float: left; } #littleDiv

以下是浮动和固定的标准用法：

<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>


#大人物
{
背景色：红色；
高度：2000px；
宽度：100px；
浮动：左；
}
#利特莱迪夫
{
背景颜色：绿色；
高度：400px；
宽度：200px；
浮动：左；
}
#小提夫
{
背景颜色：蓝色；
高度：100px；
宽度：200px；
位置：固定；
}

“littleDiv”div位于“bigDiv”div的右侧，但不跟随滚动
相反，“littleDivFixed”div会滚动，但相对于“bigDiv”div位置不好（它总是卡在显示屏的左侧）

是否可以有一个混合这两种行为的div:

始终位于“bigDiv”div的右侧（以10px的恒定距离）

始终显示在屏幕上（与顶部保持10px的恒定距离）

_

提前感谢您的帮助。
像这样吗？只需将
left
和
top
属性添加到
fixed
div

好的，这在Chrome和IE8中是有效的（确保它是标准模式，而不是怪癖），但由于某些原因，JSFIDLE中没有。我不知道为什么，但它做你想要的（我想）。如果您想确保在调整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>

#大人物{ 边框：1px纯红；高度：2000px；宽度：100px；浮动：左； } #利特莱迪夫{ 边框：1px纯绿色；高度：400px；宽度：200px；浮动：左； } #小提夫{ 边框：1px纯蓝色；高度：100px；宽度：200px；顶部：10px；位置：固定； } 函数$（元素）{ 返回文档.getElementById（elem）； } 函数positFix（）{ $（'littleDivFixed'）.style.left=$（'bigDiv'）.offsetWidth+10； } positFix（）；
您可以更改标记的结构吗
我通过两个更改获得了您描述的行为（在Firefox 3.6中）：
固定在littleDiv内部的Nest littleDiv

margin-left: 10px;
所以不是

<div id="littleDiv"> </div> <div id="littleDivFixed"> </div>
设置
margin
而不是
left
可以让您保持“自动”左侧定位，同时仍进行相对调整。
您也只能添加：

#littleDivFixed { ... top: 10px; left: 110px; }
并设置：

body { width: 310px; margin: 0; }
正确的布局

感谢您考虑这个问题并举例说明“JSFIDLE”（不知道这个网站）的用法。但我希望左边是相对于“bigDiv”div的，例如总是10px，而不是绝对的；事实上，JavaScript初始化的结果是完美的，但是。。。我不能使用JavaScript，只能使用html/css。此外，处理调整大小事件会使事情变得不那么方便。非常感谢这个神奇的技巧。它似乎与Chrome、Firefox和Opera完美配合。当然IE8/9失败了，但这是意料之中的。@认真的，很乐意帮忙。我已经完全放弃了IE，我更快乐了。
body { width: 310px; margin: 0; }