如何使用骨架CSS創建固定邊欄？

這個提問有關a few years ago沒有可用的答案。我想知道事情是否發生了變化，現在可以使用Skeleton CSS以及固定的響應邊欄。最好不需要Javascript。如何使用骨架CSS創建固定邊欄？

我的HTML如下：

<html> 
    <head> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/skeleton.css"> 
    <link rel="stylesheet" href="css/custom.css"> 
    </head> 
    <body class="container"> 
    <div class="row"> 
     <section class="three columns"> 
     <nav id="sidebar"> 
      sidebar content ... 
     </nav> 
     &nbsp; 
     </section> 
     <section id="content" class="nine columns"> 
     body content ... 
     </section> 
    </div> 
    </body> 
</html>

我試着在CSS幾種不同的方式進行固定（不滾動）的側邊欄，但保持響應大小更改佈局。最簡單的是在custom.css如下：

#sidebar { 
    position: fixed; 
}

這看起來正確的，直到頁面變得太窄，然後邊欄和主體內容重疊，但他們應該做的，而不是爲側邊欄將上述的主體內容。

這是一個jsfiddle page，可以玩這個問題。

如何創建一個適當的，固定的邊框與框架CSS的行爲正確的窗口大小更改？

來源

2016-06-28 rityzmon

不知道它有多少「Skeleton-CSS修復」，但要解決重疊問題，您應該只能將「z-index：9999;」添加到#sidebar ID，並且您應該很好 – Xariez

對「Skelton-CSS」不太瞭解，但可以添加媒體查詢以修復不同的窗口大小 –

@Xariez'z-index'指示元素顯示的z順序，但不會疊加兩個元素一個在上方（而不是在另一個的上方），另一個在視口太窄的情況下，對嗎？ – rityzmon

您可以使用「媒體查詢更改CSS的行爲時，顯示爲小於480，在它的寬度：

@media screen and (max-width: 480px) { 
    #sidebar{ 
     position: relative; 
    } 
} 

#sidebar{ 
    position: fixed; 
}

使用這種方式，這將是相對於什麼，如果寬度小於480像素，或固定在更高的分辨率

來源

2016-06-28 06:33:42

謝謝。我按照您的指示添加了@ @ media'查詢，但頁面沒有任何不同。我必須做些什麼才能啓用媒體查詢？ – rityzmon

沒關係，我沒有意識到，但我的瀏覽器窗口不會調整到500px以下，所以它沒有觸發。謝謝。 – rityzmon

另外，我必須在常規CSS下面有媒體查詢*以使其正確觸發。這應該是這樣嗎？ – rityzmon

蓋伊Dafnys答案註釋：

由於骨架具有「移動第一」的方針，我認爲這將是更好地做這種方式：

#sidebar{ 
    position: relative; 
} 

@media (min-width: 550px) { /*Skeletons default grid-activation width*/ 
    #sidebar{ 
    position: fixed; 
    max-width: 18%; /*Avoids overlapping*/ 
    } 
}

來源

2016-08-18 11:02:28

如何使用骨架CSS創建固定邊欄？

回答

相關問題