如何在不改變位置的情況下將div與另一個div重疊 - Css

我在網頁頂部有兩個div。我只想將頂部div的陰影重疊到下一個。絕對和相對定位通過擴大或固定位置徹底改變了股利的位置/位置。是否有一行代碼能夠確定哪些div會重疊，哪些div不會改變其位置？如果沒有，我怎麼能用定位來做到這一點？我頂格：如何在不改變位置的情況下將div與另一個div重疊 - Css

div#divSlogan{ 
    background-color: #FFBD01; 
    width: 50%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -1.15%; 
    padding: 0.1%; 
    -moz-box-shadow: 0px 0px 10px 2px #888888; 
    -webkit-box-shadow: 0px 0px 10px 2px #888888; 
    box-shadow: 0px 0px 10px 2px #888888; 
}

以下DIV：

div#menu{ 
    text-align: center; 
    font-size: 120%; 
    background-color: #FFA700; 
    padding: 0.1%; 
    height: 20%; 
    width: 49%; 
    margin-left: auto; 
    margin-right: auto; 
}

我的網頁：

enter image description here

總而言之，我希望把頂格的陰影（這是寫的聽。享受..）以下面的div（這是菜單）。我怎樣才能做到這一點？

來源

2014-11-21 ninbit

你有你的代碼jsfiddle嗎？ – Stefan 2014-11-21 14:48:37

你需要的是第二個z-index。給它一個比第一個更低的Z指數。並且兩者都必須至少相對定位。 – Andi 2014-11-21 14:49:02

@Stefan不，迄今爲止我沒有使用它。我也使用apache wicket，它允許我使用wicket：panel。我不認爲這個網站使用它 – ninbit 2014-11-21 14:58:46

你不需要爲此使用絕對定位。我不確定爲什麼相對定位不適合你。要使用z-index，您需要使用絕對，相對或靜態位置。這是工作代碼，在你的css文件中用這個替換div＃菜單。

div#menu{ 
    text-align: center; 
    font-size: 120%; 
    background-color: #FFA700; 
    padding: 0.1%; 
    height: 20%; 
    width: 49%; 
    margin-left: auto; 
    margin-right: auto; 
    position:relative; 
    z-index:-1; 
}

編輯1：你必須在這裏使用的相對位置，因爲z-index的，否則不會工作。

下面是這個工作的的jsfiddle：http://jsfiddle.net/pezrwv0z/3/

編輯2：可以在代碼中提高其他的事情。代替margin-left：auto;保證金右：自動;使用

margin:0 auto ;

以div爲中心。

height:20%;

您不能以百分比給出高度值，而是使用像素（px）。例如：height：50px;

編輯3：看起來，鏈接無法在z-index爲負的容器中工作。這是更新的小提琴。 http://jsfiddle.net/pezrwv0z/3/

來源

2014-11-21 14:55:37

沒關係我在你上面看到你的帖子說的沒錯。但只是看到底部的編輯，我認爲你的意思只是相對的。你是對的:) – 2014-11-21 15:01:29

你是對的！非常感謝你。 – ninbit 2014-11-21 15:06:31

高興地幫助:)，爲什麼地獄是人們downvoting這個答案：P – 2014-11-21 15:09:35

試着改變的div＃菜單 - 應該做的伎倆：

div#menu { 
text-align: center; 
font-size: 120%; 
background-color: #FFA700; 
padding: 0.1%; 
height: 20%; 
width: 49%; 
margin-left: auto; 
margin-right: auto; 
/* add these */ 
margin-top: -10px; 
/* z-index: 3; - this was the wrong way around, ignore this line :) */ 
z-index: -1; 
}

編輯：不太清楚的邊距 - 可能更適合於改變的口號格邊距 - 再次，您選擇的負值。

來源

2014-11-21 14:51:33 Dave

這將拉起菜單。它已經在口號之上，OP想要與之相反。 – 2014-11-21 14:59:44

是的，你說得對。我的錯。我已更正了建議的答案（留下了我的錯誤，所以您的評論不會變得多餘）。 – Dave 2014-11-21 15:02:05

看起來不錯！ :) – 2014-11-21 15:02:20

如何在不改變位置的情況下將div與另一個div重疊 - Css

回答

相關問題