需要使用位置：固定但仍需流動元素。怎麼做？

場景：需要使用位置：固定但仍需流動元素。怎麼做？

在HTML中，我有2個元素（頂部欄和圖像）。頂部欄需要在position:fixed（這將打破流動，我明白）。並且第二個元素有margin-top將「頂部欄」後的圖像下推。在我最小化瀏覽器寬度之前，這沒有問題，「頂部欄」中的內容推動容器高度，並與第二個元素（圖像爲第二個）重疊。這看起來很醜。

無論如何，第一個元素的第二個元素流動，這樣無論我如何最小化我的瀏覽器寬度，第二個元素是智能足以推下。

代號：CSS

.TopBar {         /* 1st Element */ 
    background-color: #000000; 
    opacity: 0.5; 
    width: 100%; 
    position:fixed; 
    padding:10px; 
} 
.TopBar > div { 
    color:white; 
} 

.carousel {         /* 2nd Element */ 
    display: inline-block; 
    margin-top:73px; 
} 
.carousel_img { 
    width: 100%; 
}

問題：

來源

2017-06-20 BSS

正如你已經知道，你不能強迫position:fixed流動，所以沒有一個答案以你想要的方式去做你的問題。

但是，您描述問題的方式是關於支持不同的瀏覽器大小。如果是這樣的話，那麼聽起來好像媒體查詢是你的問題的答案。

CSS支持@media { ... }塊，它允許您指定僅在特定瀏覽器大小時才起作用的樣式。因此，爲了解決您的問題，您需要找出瀏覽器寬度會導致佈局發生變化（調整速度非常緩慢;它會以特定大小翻轉），然後編寫媒體查詢，以更改樣式表的大小，使其小於此大小。

沒有（很多）你的佈局的更多細節，我不能真正給你具體的代碼，但是如果你還沒有使用它們，有很多可用的在線資源來了解媒體查詢。

同樣值得注意的是，position:fixed在小型瀏覽器中經常會遇到麻煩，以至於很多移動瀏覽器在一段時間內故意不支持它。這現在已經改變，但它仍然可以導致佈局gremlins，因此您可能想要使用媒體查詢在低寬度瀏覽器中完全關閉它。

來源

2017-06-20 19:01:18 Spudley

是的，你說得對，position：fixed和其他屬性會在頁面獲得更多元素時引發很多問題。我還沒有真正學會如何使用@media，但讓我看看。其實我的意圖很直接，我在索引頁面有多個元素（img，div），當我向下滾動時，導航欄應始終保持在頂部，以便用戶隨時隨地訪問它在頁面上。除媒體之外，真的沒有其他選擇嗎？謝謝。 – BSS

可能還有其他選擇，但@media幾乎肯定是最好的選擇 - 很簡單，因爲在不同的瀏覽器大小下，通常會讓一些佈局看起來不同。媒體查詢確實很容易掌握，他們給了你很大的靈活性，可以根據不同的瀏覽器尺寸定製你的設計，所以他們非常值得學習。 – Spudley

嗨Spudley，你介意幫助查看附件谷歌驅動器中的源文件。我無法找出#topnav可以像位置一樣行爲的原因：粘滯或固定，當css有position：relative .... [單擊此處訪問HTML文件]（https://drive.google .com/drive/folders/0BzbdjY-H_HzZTC1Rci1nY0F4VFU？usp = sharing） – BSS

如果我明白你想達到什麼目的，有一個解決方法可以實現類似的結果。

首先，您實際上無法讓您的TopBar表現得像位置固定的流動集團元素。所以，讓我們做靜態。

「固定」的行爲將被定身性

body { 
    /* NOTICE the vertical flex box, makes the height adjust 
    automaticaly (no need to toggle)*/ 
    display: flex; 
    flex-direction: column; 
    max-height: 100vh; /* Restrain the body to the window height */ 
    overflow-y: hidden; /* Prevent scrollbar on body */ 
} 

.TopBar { 
    display: block; /* Blocks have 100% widht by default, don't need to 
        specify */ 
    padding: 10px; 
    position: static; /* No need to specify, it's the default value */ 
    /* Helpers to make the TopBar easier to track */ 
    background-color: #000000; 
    opacity: 0.5; 
    /* This is not part of the solution, it's only to make the height inversely proportional to window width 
    e.g. make it grow while the other decrease 
    */ 
    height: calc(200px - 10vw); 
} 

/* 
    Just under the TopBar, lets place a container element that will act 
    as scrolling window 
*/ 

.container { 
    height: 100vh; /* max-height is superfluous because of the overflow. */ 
    /* This will simply make the scrolling on the container instead of the body */ 
    overflow-y: scroll; 
} 
.TopBar { 
    /* 1st Element */ 
} 
.TopBar > div { 
    color: white; 
} 
/* simply to display some text */ 
p { 
    width: 50%; 
    margin: 1em auto; 
}

放置容器裏面瞧你的轉盤來提供！無需位置和Z指數擺弄。 TopBar和容器正在流動，前者將「推」後者。

這就是說，一些媒體查詢調整不會傷害。根據你的圖片，你的TopBar中的元素是內聯的（內聯或內聯塊）。你應該考慮讓他們「封鎖」。柔性盒也值得考慮。

希望這有助於

來源

2017-06-20 20:19:03 bFavreault

我試過了你的評論，它不能解決我的問題。當我最小化瀏覽器時，頂部導航欄和圖像仍然相互重疊。但我明白你的想法，如果瀏覽器的大小被最小化，你正在使用溢出來隱藏溢出內容....感謝您的幫助...偉大的想法。 – BSS

** body **上的「overflow：hide」是爲了防止在整個身體上滾動。 'overflow-y：scroll'使它在容器中... 您可能沒有應用解釋。它的工作原理，這是一個老的（衆所周知的）方法。如果我有空閒時間（我正在寫作），我會用代碼筆回覆您。 – bFavreault

@BSS查看此密碼自己寫筆 https://codepen.io/iRouge/pen/yXpXGz?editors=1100 – bFavreault

響應由Spudley上使用@media來解決這一問題給出的答覆，我試圖找到一些頁面，有「固定」 &溢出因素的影響，並檢查代碼通過網頁編輯器查看它。這就是我得到的。我慢慢刪除所有的CSS和相關元素，直到我得到「固定」不工作。雖然這個位置仍然處於相對位置：相對而言，它附着了一個CSS，當我移除它時，「固定」效果消失了。

參考網址：

https://www.w3schools.com/css/css3_colors.asp

我過濾源文件：

https://drive.google.com/drive/folders/0BzbdjY-H_HzZTC1Rci1nY0F4VFU?usp=sharing

是解決我的問題（我猜）

編碼的屏幕截圖
Click Here to see the screen shot

來源

2017-06-23 19:53:39 BSS

需要使用位置：固定但仍需流動元素。怎麼做？

回答

相關問題