CSS中的重疊DIV

我知道這個問題已經在本網站上提出過了，我已經看過所有的答案。但是，我仍然無法找到解決方案。CSS中的重疊DIV

當我調整瀏覽器的大小時，我所有的div（以後會是按鈕）都會彼此超越。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background-color: beige; 
 
} 
 

 
#Rosa { 
 
    color: White; 
 
    font-family: Arial Black; 
 
    max-width: 100px; 
 
    height: 25px; 
 
    position: fixed; 
 
    left: 90%; 
 
    top: 1.5%; 
 
    z-index: 2; 
 
    padding: 2px; 
 
    border-bottom: 1px solid white; 
 
    border-top: 1px solid white; 
 
    overflow: hidden; 
 
} 
 

 
#Martin { 
 
    color: White; 
 
    font-family: Arial Black; 
 
    max-width: 147px; 
 
    height: 25px; 
 
    z-index: 2; 
 
    position: fixed; 
 
    left: 77%; 
 
    top: 1.5%; 
 
    padding: 2px; 
 
    border-bottom: 1px solid white; 
 
    border-top: 1px solid white; 
 
    overflow: hidden; 
 
} 
 

 
#Malcom { 
 
    color: white; 
 
    font-family: Arial Black; 
 
    max-width: 87px; 
 
    height: 25px; 
 
    padding: 2px; 
 
    z-index: 2; 
 
    position: fixed; 
 
    left: 68.5%; 
 
    top: 1.5%; 
 
    border-bottom: 1px solid white; 
 
    border-top: 1px solid white; 
 
    overflow: hidden; 
 
} 
 

 
#Design { 
 
    color: white; 
 
    font-family: Arial Black; 
 
    width: 60px; 
 
    height: 25px; 
 
    padding: 2px; 
 
    z-index: 2; 
 
    position: fixed; 
 
    left: 62%; 
 
    top: 1.5%; 
 
    border-bottom: 1px solid white; 
 
    border-top: 1px solid white; 
 
    overflow: hidden; 
 
} 
 

 
.navigation a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
#Bar { 
 
    min-width: 100%; 
 
    max-height: 260px; 
 
    position: fixed; 
 
    top: 0px; 
 
    z-index: 1; 
 
}

<div class="navigation"> 
 
    <div id="Rosa"> Rosa Parks </div> 
 
    <div id="Martin">Martin Luther Jr.</div> 
 
    <div id="Malcom">Maclom X</div> 
 
    <div id="Design">Design</div> 
 

 
    <img id="Bar" src=./assets/bar.png> 
 
</div>

任何幫助表示讚賞。謝謝。

P.s.這是一個導航欄，即使在您滾動時，它也會停留在頁面的頂部。

來源

2017-04-04 ImperfectLion

請發表html。你看過flexbox嗎？ – Naomi

已發佈圖片不存在。 – kojow7

你可以做類似的事情。這將使菜單保持在右側或左側，具體取決於您選擇的浮動，當窗口變小時不會彼此超越。

.navigation { 
 
width: 100%; 
 
height: 260px; 
 
background-color: black; 
 

 
} 
 

 
.menu { 
 
display: inline-block; 
 
color: white; 
 
float: right; 
 
}

<div class="navigation"> 
 
    <div class="menu" id="Rosa"> Rosa Parks </div> 
 
    <div class="menu" id="Martin">Martin Luther Jr.</div> 
 
    <div class="menu" id="Malcom">Maclom X</div> 
 
    <div class="menu" id="Design">Design</div> 
 

 
    
 
</div>

來源

2017-04-04 20:50:11 Naomi

我試過了，但它仍然落後於對方。（我也刪除了我加入的酒吧）我應該從ID中刪除'position：fixed'嗎？ – ImperfectLion

是的。固定是什麼讓他們彼此超越 – Naomi

如果我刪除了'position：fixed'，那麼所有的文字都會在屏幕的右上方沒有任何間隔 – ImperfectLion

div之所以彼此關聯，是因爲你在所有具有id的div中使用position: fixed和left（這也不是一個好的做法）。

刪除這些position: fixed和left s它應該正常工作。

來源

2017-04-04 20:35:35 Robson

如果我刪除'position：fixed'，文字就會落在我的黑條之後。如果我刪除了'position：fixed'和'left'，那麼它會重置爲左上 – ImperfectLion

@ImperfectLion ** Robson **是正確的，對於頁面佈局使用「絕對」或「固定」定位是一個壞主意，主要是因爲它是不利於響應式網頁設計，並且總體而言令人頭痛。 – hungerstar

因爲您已將它設置爲z-index：1，所以文本會放在欄的後面。如果你想在它背後它是-1 – Naomi

使用float: left代替position: fixed;和left: Ypx;您的div內.navigation

來源

2017-04-04 20:45:46 indubitablee

取而代之的設置位置嘗試設置display: inline-block。另外，如果有像這樣的設置應用於多個圖像，則應將其放置在類風格中。這樣，每次想要進行更改時都不必編輯多個樣式。

您還應該刪除所有樣式的位置，頂部，左側，z-index。

來源

2017-04-04 20:47:24 kojow7

下面是使用flexbox一個現代的方法。有人會說要使用<nav>中的無序列表，而不是鏈接，可能要tomahto。

Scotch有一個偉大的寫了關於如何使用flexbox，你可以查看support on Can I Use。

body { 
 
    margin: 0; 
 
    background-color: white; 
 
} 
 
header { 
 
    position: fixed; 
 
    display: flex; 
 
    width: 100%; 
 
    height: 50px; 
 
    justify-content: space-between; 
 
    background-color: black; 
 
    box-shadow: 0 3px 3px rgba(129, 123, 123, 0.5); 
 
} 
 

 
main { 
 
    padding-top: 50px; /* should match <header> height so <header> doesn't hide content */ 
 
    min-height: 1500px; 
 
} 
 

 
p { 
 
    margin: 0 0 1rem; 
 
} 
 

 
.primary { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.primary > a { 
 
    padding: 0 10px; 
 
    color: white; 
 
}

<header> 
 

 
    <img class="logo" src="http://placehold.it/50x50/A10"> 
 
    
 
    <nav class="primary flex"> 
 
    <a href="#rosa-parks">Rosa Parks</a> 
 
    <a href="#mlk">Martin Luther Jr.</a> 
 
    <a href="#malcom-x">Maclom X</a> 
 
    <a href="#design">Design</a> 
 
    </nav> 
 
    
 
</header> 
 

 
<main> 
 

 
    <p> 
 
    Lorem ipsum dolor. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor. 
 
    </p> 
 

 
    <p> 
 
    Lorem ipsum dolor. 
 
    </p> 
 
    
 
</main>

不知道你打算如何使用<img>但我用它就像一個標誌。

來源

2017-04-04 20:58:15 hungerstar

這是一個像Brackets的代碼編輯器，但對於HTML？ – ImperfectLion

你說的是代碼片段嗎？如果是這樣，這是一個StackOverflow功能，可以讓我們在問題和答案中創建[最小，完整和可驗證的示例]（http://stackoverflow.com/help/mcve）。 FWIW，Brackets是HTML的代碼編輯器。 – hungerstar

CSS中的重疊DIV

回答

相關問題