避免側邊欄與CSS定位在tumblr上重疊內容

我遇到了問題，避免我的側邊欄在tumblr上重疊我的博客的主要內容。我在修改過的tumblr上使用了預製模板。唯一的方法，我可以在右上角的位置我的側邊欄，是通過使用絕對或固定的位置：避免側邊欄與CSS定位在tumblr上重疊內容

#sidebar{ 
position:fixed; 
top:20px; 
right:20px; 
}

當使用例如相對而言，側邊欄位置本身在我的主要內容之後。

我的頁面建成這樣的：

<body> 
    <div id="page"> 

     <div id="header"> 
     </div> 
     <div id="content"> 
     </div> 

    </div> 

    <div id="sidebar"> 
    </div> 

</body>

點擊here看到的網頁。我試圖把我的邊欄放在頁面div裏面，但是寬度上有一個約束，我想保留它。先謝謝你。

來源

2013-05-14 Emil Nielsen

當屏幕縮小到導致重疊的寬度時，您希望發生什麼？ – JacobMcLock 2013-05-14 19:06:53

當發生這種情況時，我希望邊欄和頁面縮小。如果可能的話，我想避免使用任何JavaScript。否則，任何類似的解決方案都會一樣好。 – 2013-05-14 19:29:51

您希望容納的最小寬度屏幕是多少？例如，如果我將瀏覽器窗口縮小到iPhone的寬度，那麼您的「縮小側邊欄」的解決方案不可行，因爲它必須非常窄。 – JacobMcLock 2013-05-14 19:38:44

根據您的最新評論，這應該有助於您的問題：

你可以只設置一個最小寬度的頁面上，重新排列你的標記一點點，並刪除側欄上的一些風格。如果你把一切都像它是現在，那麼下面將幫助：

集min-width: 1250px;您body標籤
移動sidebar元素到page元素之前
從sidebar元素刪除position: fixed;

這將防止菜單重疊頁面內容，並且會在用戶的窗口小於1250px時向頁面添加水平滾動條。如果您希望支持更小的最小寬度，或者如果背景圖像在小分辨率下不居中時出現問題，則需要稍作修改。

來源

2013-05-14 21:39:51 JacobMcLock

避免側邊欄與CSS定位在tumblr上重疊內容

回答

相關問題