固定在右

浮動拋開我有一種情況是這樣的：固定在右

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>test</title> 
    </head> 
    <style> 
     #wrapper { width: 1100px; margin: 0px auto; } 
     #wrapper #stream { width: 790px; float: left; border: 1px solid red; } 
     #wrapper aside { width: 270px; float: left; border: 1px solid red; } 
    </style> 
    <body> 
     <section id="wrapper"> 
      <section id="stream"> 
       some text... 
      </section> 
      <aside> 
       <ul>  
        <li>something</li> 
        <li>something</li> 
        <li>something</li> 
        <li>something</li> 
       </ul> 
      </aside> 
     </section> 
    </body> 
</html>

，我想的是，側邊欄不動，即使頁面向下滾動。

我試過一邊的位置設置固定，但讓我無法正確設置的距離從左邊。

我發現蒙山jQuery的

$(document).ready(function() { 
    $(window).scroll(function() { 

     $("aside").css('top', $(window).scrollTop()+'px'); 

    }); 
})

但鍍鉻的解決方案和Safari的一邊滾動是分段。

任何幫助？

========================

SOLUTION：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>test</title> 
    </head> 
    <style> 
    #wrapper { 

     width: 1100px; 
     margin: 0px auto; 
    } 
    #stream { 
     width: 800px; 
     background: #ccc; 
     float: left; 
    } 
    #sidebar { 
    float: left; 
     border: 1px solid red; 
     width: 200px; 
    } 
    aside { 
     position: fixed; 
     top: 20px; 
     border: 1px solid red; 
    } 
    </style> 
    <body> 
    <section id="wrapper"> 
     <section id="stream"> 
       some text... 
     </section> 
     <section id="sidebar"> 
      <aside> 
       <ul>  
        <li>something</li> 
        <li>something</li> 
        <li>something</li> 
        <li>something</li> 
       </ul> 
      </aside> 
     </section> 
    </body> 
</html>

感謝所有！

來源

2013-03-22 Gnamm

我有點困惑，爲什麼固定位置沒有工作？你能展示你嘗試過的CSS，並告訴我們爲什麼你沒有得到它的工作？（請注意，您可以編輯您的問題補充細節。） – Jeroen 2013-03-22 08:28:15

如果你有左，只是不設置適當的距離問題;噸設置。我思它可能是類似於[本示例]（http://stackoverflow.com/questions/15430320/fixed-div-next-to-parent-div/15431083#15431083）。 – 2013-03-22 08:33:24

爲了使用top，right，bottom或left屬性，您必須將對象的display屬性設置爲absolute，relative或fixed。

無論哪種方式，通過設置position: fixed;它不會滾動時移動。

來源

2013-03-22 08:27:32

我認爲設置'position：fixed' **會在滾動時移動元素**。 – 2013-03-22 08:30:50

感謝nd_macias我找到了適用於我的簡單解決方案！我已將它添加到問題中。 – Gnamm 2013-03-22 09:19:05

@nd_macias uuhhm ...不。 'position：fixed'會修正屏幕上的元素。 'position：absolute'將允許你從它的父對象設置一個相對元素，'position：relative'從它的當前位置設置一個相對元素。 – 2013-03-22 09:59:47

回答

相關問題