HTML5和CSS中的滑塊位置問題

我想將主滑塊放置在主導航之後，因此我將導航position設置爲fixed，並將滑塊位置設置爲絕對。它工作正常，但由於某種原因，整個頁腳元素移動到導航下和滑塊上。我試圖給滑塊min-width並顯示block，但它不起作用。HTML5和CSS中的滑塊位置問題

這是我的示例代碼。

導航HTML：

<nav> 
    <a href="#">Item 1</a> 
    <a href="#">Item 2</a> 
    <a href="#">Item 3</a> 
</nav>

滑塊HTML：

<div class="slider"> 
    Slider Items Here 
</div>

頁腳HTML：

<footer> 
</footer>

CSS代碼

nav { 
    top: 0px; 
    position: fixed; 
    z-index: 99999; 
} 

.slider { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    bottom: 0; 
    min-height: 600px; 
    display: block; 
} 

footer { 
    display: block; 
}

這裏是如何看現在：

來源

2017-04-09 Kevin S

由於位置設置爲絕對的事實，因此不會考慮定位其他元素。 – Sorikairo

@Sorikairo我可以在導航後面放置滑塊的唯一方法是將滑塊的'position'設置爲'absolute'。我曾嘗試爲頁腳設置不同的位置，但它似乎不起作用。 –

我會建議你在導航和腳註上使用絕對位置而不是滑塊:)在底部固定第一個和後一個 – Sorikairo

如評論中所述，您應將頁眉和頁腳位置設置爲absolute（前者在頂部，後者在底部），並從滑塊中移除absolute。

然後您的滑塊將是整頁，並且頁眉和頁腳將始終處於正確的位置。

來源

2017-04-09 14:46:57 Sorikairo

.wrapper { 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
header, 
 
footer { 
 
    height: 30px; 
 
} 
 

 
main { 
 
    flex: 1; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    background-color: #2ecc71; 
 
} 
 

 
main { 
 
    background-color: #ecf0f1; 
 
} 
 

 
footer { 
 
    background-color: #2c3e50; 
 
    color: white; 
 
}

<div class="wrapper"> 
 
    <header>I'm a 30px tall header</header> 
 
    <main>I'm the main-content filling the void!</main> 
 
    <footer>I'm a 30px tall footer</footer> 
 
</div>

Like This ......You want!! 
at the top of Header and inside header Nav Bar ... In Main Section Slider And Below Footer ! 

http://codepen.io/enjikaka/pen/zxdYjX

來源

2017-04-09 07:45:44

儘管此鏈接可能回答問題，但最好在此處包含答案的基本部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/15789370） –

如果你知道答案然後寫在這裏...不要只給出建議..我嘗試我的水平最好@ABusyProgrammer –

沒有什麼你的代碼不對。您只需直接在帖子中發佈。並沒有必要粗魯，閱讀[__如何在StackOverflow__上發佈一個很好的答案]（https://stackoverflow.com/help/how-to-answer） –

HTML5和CSS中的滑塊位置問題

回答

相關問題