如何定位DIV DIV在另一個上面的div

，但我不能設置位置圖像（綠框）。

橙色框在頂部
藍色和淺綠DIV是按鈕
紅色幀是下橙色框靜態遙遠
綠色框的內部設置有圖像鏈接，部分地覆蓋藍色和淺綠的按鈕。
每個鏈接必須每次都保持可點擊。

我無法居中綠色圖像，並將其設置在橙色部分以上。

示例代碼here

<div class="header-container"> 
<div class="nav-container"> 
    <div class="logo"> 
     <a href="1">Click!</a> 
    </div> 
    <div class="nav"> 
     <a href="2">Click!</a> 
    </div> 
</div> 
<div class="header-image"> 
    <div class="image"> 
     <a href="3">Click!</a> 
    </div> 
</div> 
<div class="menu-container"> 
    <a href="4">Click!</a> 
</div>

.nav-container{ 
    width: 100%; 
    height: 50px; 
    background: orange; 
} 
.logo{ 
    width: 25%; 
    height: 40px; 
    margin: 5px; 
    background-color: lightblue; 
    float: left; 
} 
.nav{ 
    width: 25%; 
    height: 40px; 
    margin: 5px; 
    background-color: lightgreen; 
    float: right; 
} 
.header-image{ 
    width: 100%; 
    border: 1px solid green; 
    position: relative; 
    z-index: 2; 
    text-align: center; 
} 
.image{ 
    height: 100px; 
    width: 60%; 

    background: green; 
    opacity: 0.6; 
} 
.header-image a{ 
    padding: 40px 0; 
} 
.menu-container{ 
    width: 100%; 
    border: 1px red solid; 
    height: 40px; 
    margin-top: 50px; 
}

來源

2015-10-22 Bejkrools

我上傳你的jsfiddle here。

Addded下面的CSS：

.header-image { 
    position: absolute; 
    top: 40px; 
    left: 20%; 
}

還增加了額外的邊距爲.menu-container

.menu-container { 
    margin-top: 80px; //instead of 50px 
}

我已經將其定位絕對的，因爲這樣一來就會走，無論你想它基於身體相對定位。

來源

2015-10-22 09:24:03

感謝您的幫助。我還有一個小問題。看看這個[code]（http://jsfiddle.net/o3oyuzb9/4/）。爲什麼我不能設置**圖片**中心位置？以及爲什麼** header-image **寬度超過父級的100％？ – Bejkrools

這是因爲你沒有相對於父母的職位。添加相對於.header-container的位置。也爲圖片添加邊距：0自動。這裏是jsfiddle：http://jsfiddle.net/o3oyuzb9/5/ –

謝謝解釋！現在我正在嘗試爲我的網絡應用更改。 – Bejkrools

加入這image應該工作：

margin:0 auto; 
position:relatve; 
z-index:66; 
margin-top:-10px

http://jsfiddle.net/o3oyuzb9/2/

來源

2015-10-22 09:25:59 maioman

嘗試this

不僅改變了CSS

body,html{margin: 10px;} 
.header-container{ 
    width: 100%; 
} 
a{ 
    text-decoration:none; 
    color:#000; 
    padding: 10px 0px; 
    display: block; 
    text-align: center; 
} 
.nav-container{ 
    width: 100%; 
    height: 50px; 
    background: orange; 
} 
.logo{ 
    width: 25%; 
    height: 40px; 
    margin: 5px; 
    background-color: lightblue; 
    float: left; 
} 
.nav{ 
    width: 25%; 
    height: 40px; 
    margin: 5px; 
    background-color: lightgreen; 
    float: right; 
} 
.header-image{ 
    width: 100%; 
    border: 1px solid green; 
    position: relative; 
    z-index: 2; 
    text-align: center; 
} 
.image{ 
    height: 100px; 
    width: 60%; 
    margin: 0 auto; 
    margin-top: -20px; 
    background: green; 
    opacity: 0.6; 
} 
.header-image a{ 
    padding: 40px 0; 
} 
.menu-container{ 
    width: 100%; 
    border: 1px red solid; 
    height: 40px; 
    margin-top: 50px; 
}

只是添加到您的圖片類：

margin: 0 auto; 
margin-top: -20px;

來源

2015-10-22 09:26:54 LiranBo

如何定位DIV DIV在另一個上面的div

回答

相關問題