Div的位置困擾另一個divs，所以我不能點擊它們

可能是一個noob問題，但我無法理解在CSS中的定位非常好。昨天我遇到了背景和下拉菜單的問題，所以我決定從頭開始。問題依然存在。Div的位置困擾另一個divs，所以我不能點擊它們

我的h1不能處於我想要的位置，所以我表明了自己的立場：相對的，然後我可以移動它，但是因爲這樣我無法點擊我的下拉菜單甚至是標誌。只有一半。

HTML：

<link rel="stylesheet" type="text/css" href="./style2.css" /> 
</head> 
<body> 
<div id="stajl"> 
<ul> 
<li><a href="#">Home Page </a></li><li> 
<a href="#">Services <span class="arrow">&#9660;</span></a> 
<ul><li> 
<a href="#">Trades </a></li><li> 
<a href="#">Exchanges </a></li><li> 
<a href="#">Business to Business </a></li> 
</ul> 
<li><a href="#">About </a></li><li> 
<a href="#">Contact </a></li> 
</ul> 
</div> 
<div id="img"> 
<a href="#"><img src="pfslogo2.png" /> </a> 
</div> 
<div id="header"> 
<h1>We're here to help! </h1> 
</div> 
</body> 
</html>

CSS：由Dorvalla我的問題建立

body { 
overflow-y: scroll;} 
#stajl ul { 
list-style-type: none; 
margin:0; 
padding:0; 
float: right; 

} 
#stajl ul li:hover a{ 
background-color: #d7e6fa; 
} 

#stajl ul li { 
display: inline-block; 

} 

#stajl ul li a { 
text-decoration: none; 
display: block; 
padding: 15px; 
color: white; 
background-color: #0099cc; 

} 

#stajl ul ul { 
display: none; 
position: absolute; 
margin-left: -105px; 
} 
#stajl ul li:hover ul { 
display: block; 
} 

#stajl ul ul li { 
display: block; 
color: white; 
width: 352px; 

} 
#stajl ul li li a:hover { 
color: cyan; 
} 
.arrow { 
font-size: 10px; 
vertical-align: middle; 
} 

#img img { 
margin: 0; 
padding: 0; 
height: 50px; 
width: 100px; 
top: 0; 
left:0; 
} 
#header h1 { 
padding: 0; 
margin:0; 
text-align: center; 
position: relative; 
top: -40px; 
left: -60px; 
color: #0099cc; 
}

Codepen：codepen.io/anon/pen/VeXyRY

任何意見，將不勝感激！謝謝

來源

2016-01-26 Vucko

可能這與'h1'是否帶有初始邊界頂部/底部？ –

我添加了一個400px的寬度，並將其左側更改爲100px，並且對我來說工作正常 –

爲您的問題創建了一個codepen。 http://codepen.io/anon/pen/VeXyRY – Dorvalla

的H1是阻斷光標，你需要設置H1是有點短：

#header { 
    text-align:center; 
} 
#header h1 { 
    display:inline-block; 
}

http://codepen.io/niorad/pen/EPEQxJ

來源

2016-01-26 13:52:39 niorad

它也工作！它和z-index有什麼區別：-1; ？雖然謝謝！ – Vucko

兩者都應該工作。有了這個解決方案，該元素在X軸上不受干擾，使用Z-Index，該元素在Z軸上不受干擾（「進入」頁面）。我比Z-index更喜歡它，因爲我不是追蹤所有索引號的粉絲。 – niorad

我剛剛和他們一起玩過並得出了相同的結論，因爲z-index在頁面上保持阻塞並不是那麼好。我在#header h1中使用position：relative會好嗎？我的意思是，我無法移動我的H1。 – Vucko

設置菜單的z-index高於div的z-index。

來源

2016-01-26 13:50:53

我所做的只是z -index：-1;到#header h1 {}，它的工作！非常感謝！ – Vucko

放一個z-index: -1;你的H1，那麼你的導航將再次工作。

來源

2016-01-26 13:53:13

我做到了！它的工作，但只有z-index：-1。當我試圖把z-index：2;到我的導航和z-index：1;到我的H1它沒有工作！謝謝 – Vucko

Div的位置困擾另一個divs，所以我不能點擊它們

回答

相關問題