如何通過「z-index」在內容頂部始終生成菜單

我遇到了問題，我無法確定如何解決此問題。我想要的是，「紅色框」停留在z-index 2頁面的頂部，而背景上的所有內容都保留在索引1上，但不知何故，此代碼會「摺疊」這些圖層。如果有人能幫助我，我真的很感激。對不起我的英語不好。提前致謝。如何通過「z-index」在內容頂部始終生成菜單

<html> 
<head> 
<title></title> 
<style type="text/css"> 

body { margin: 0; } 

#container { 
    position: absolute; 
    float: right; 
    z-index: 1; 

} 

.left1 { 
    background-color: blue; 
    height: 50px; 
    width: 100%; 

} 
.left2 { 
    background-color: green; 
    height: 50px; 
    width: 100%; 

} 


#right { 
    background-color: red; 
    height: 300px; 
    width: 300px; 
    float:right; 
    z-index: 999999; 
    margin-top: 0px; 
    position: relative; 
} 




</style> 
</head> 

<body> 

<div id="container"></div> 
<div class="left1">LEFT BLUE</div> 
<div class="left2">LEFT GREEN</div> 
</div> 
<div id="right">RIGHT RED</div> 

</body> 
</html>

來源

2012-05-08 rmz

我想你需要分享一些html來幫助我們來幫助你......你可能不需要z-index來做到這一點。你可以使用相對和絕對定位......並期待你的CSS例子，恐怕你可能不太瞭解如何正確使用相對和絕對定位。不，我對此知之甚多;） – rafaelbiten

工作！完善。我以前嘗試過，但我不會將其改爲「絕對」。非常感謝你！ – rmz

div中額外的結束標記在你的html中 – adedoy

你很可能不需要z-index來做到這一點。您可以使用相對和絕對定位。

我建議你看看css定位和相對定位和絕對定位之間的區別......我看到你正在設置position：absolute;到一個元素並試圖浮動該元素。它不會工作的朋友！當你理解在CSS中的位置時，它會讓你的工作變得更容易！ ;）

來源

2012-05-08 22:10:31 rafaelbiten

是的，你是絕對正確的。感謝您的建議。我仍然搞亂定位......再次感謝！ – rmz

讓我知道你是否需要任何幫助！請記住，「絕對」定位元素將始終與其設置爲'position：relative;'的父元素「相對」。如果你明白這一點，它會幫助你確定絕對定位的元素。祝你的項目好運！ – rafaelbiten

非常感謝:) – rmz

#right { 
    background-color: red; 
    height: 300px; 
    width: 300px; 
    z-index: 9999; 
    margin-top: 0px; 
    position: absolute; 
    top:0; 
    right:0; 
}

位置：絕對;頂部：0;右：0;在這裏做工作！ :) 也刪除浮動！

來源

2012-05-08 22:07:43 creativeby

好的，我假設你想把.left放在容器內，所以我建議你編輯你的html。關鍵是position:absolute和right:0

#right { 
    background-color: red; 
    height: 300px; 
    width: 300px; 
    z-index: 999999; 
    margin-top: 0px; 
    position: absolute; 
    right:0; 
}

這裏是全碼：http://jsfiddle.net/T9FJL/

來源

2012-05-08 22:19:16 adedoy

你可以把風格div容器菜單用：

<div style="position:relative; z-index:10"> 
    ... 
    <!--html menu--> 
    ... 
</div>

前 enter image description here

之後

enter image description here

來源

2015-05-21 07:43:09

不適合我。 – huykon225

如何通過「z-index」在內容頂部始終生成菜單

回答

相關問題