混合浮動和固定定位

這裏是一個標準的使用浮動和的固定：混合浮動和固定定位

<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

混合浮動和固定定位

回答

相關問題