混合浮动和固定定位

这里是一个标准的使用浮动和的固定：混合浮动和固定定位

<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” 分区是对 “bigDiv” 的权利div但不遵循滚动，
“littleDivFixed”div相反，但相对于“bigDiv”div却没有很好地定位（它总是被卡住显示屏的左侧）。

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

总是在 “bigDiv” 右边的div（在恒定的距离10px），
总是在显示屏上（距离顶部10px的恒定距离）？

在此先感谢您的帮助。

来源

2011-01-20 Pragmateek

你可以改变标记的结构吗？

我通过使两个改变了你（在Firefox 3.6中）中描述的行为：

巢littleDiv内littleDivFixed

所以不是

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

你有

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

添加保证金固定股利

margin-left: 10px;

设置margin代替left让你保持“自动”离开的定位，同时还在做相对调整。

来源

2011-01-20 20:15:01 harpo

是否这样？只需添加一个left和top属性的fixed DIV

http://jsfiddle.net/t5bK9/

好吧，这部作品在Chrome和IE8（确保它的标准模式，而不是怪癖），但由于某种原因没有的jsfiddle。我不知道为什么，但它做你想做的（我认为）。如果你想确保在div被调整大小的情况下总是10px，你可以添加一个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>

来源

2011-01-20 19:29:52

谢谢您考虑的问题，并说明如何使用“的jsfiddle”的（不知道这个网址）。但我希望左边是相对于“bigDiv”div，例如总是10px，而不是绝对的。 – Pragmateek 2011-01-20 19:38:40

谢谢;实际上JavaScript初始化的结果是完美的，但是...我不能使用JavaScript，只能使用html/css。此外处理调整大小事件使事情不太方便。 – Pragmateek 2011-01-20 23:22:00

您也可以只添加：

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

，并设置：

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

正确的布局。

JSFiddle

来源

2017-04-21 10:41:09 simhumileco

混合浮动和固定定位

回答

相关问题