與其他div的相對和絕對創建問題

Question

我使用了位置爲relative和位置absolute的兩個div。他們工作正常，但問題是，當我把另一個div放在它們下面時，它應該在上面的div /背景圖像之後開始，但是它會落後。這是小提琴。我無法上傳圖片。

https://jsfiddle.net/630gLxfk/

下面的代碼：

.banner{ 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-image:url('../images/main.png'); 
 
    height: 100%; 
 
} 
 

 
.banner div{ 
 
    font-family: young; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    display: table; 
 
    right: 0; 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 100%; 
 
    position: absolute; 
 
    color: white; 
 
} 
 

 
.banner h1{ 
 
    font-size: 70px; 
 
} 
 

 
.logo{ 
 
    position: relative; 
 
    background-color: #cccccc; 
 
    background: rgba(204, 204, 204,0.8); 
 
}

<div class="banner"> 
 
    <div> 
 
    <h1>Let's Move Together</h1> 
 
    </div> 
 
</div> 
 

 
<div class="logo" align="center"> 
 
    <img src="images/logo.png" class="img-responsive" /> 
 
</div> 
 
<div style=""> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadasaa</h1> 
 
</div>

Answer 1

假設你想標題&下方的 'asdadadas' 內容捐款按鈕：

<div class="content-under"> 
<h1>asdadadas</h1> 
<h1>asdadadas</h1> 
<h1>asdadadas</h1> 
<h1>asdadadas</h1> 
<h1>asdadadas</h1> 
<h1>asdadadas</h1> 
<h1>asdadadas</h1> 
<h1>asdadadasaa</h1> 
</div> 

然後在CSS

.content-under { 
    position:absolute; 
    top:60%; 
} 

參見：https://jsfiddle.net/04ad4ok0/

Answer 2

我試圖使這更簡單。我希望這個對你有用。

1. 您有背景圖片的橫幅。
2. 在它上面你標題中心（爲簡單起見，我刪除了包裝<div>）
3. 然後你有標誌包裝。圖像是內聯元素，因此如果要將其居中，請將text-align: center應用於父級。

.banner{ 
 
    width: 100%; 
 
    height: 80px; 
 
    
 
    background-image:url('http://placehold.it/200x40/'); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    text-align: center; 
 
} 
 
.banner h1 { 
 
    line-height: 80px; /* same as banner height*/ 
 
    font-size: 42px; 
 
    color: white; 
 
} 
 

 
.logo{ 
 
    padding: 8px; /* giving a bit space */ 
 
    background-color: wheat; 
 
    text-align: center; 
 
}

<div class="banner"> 
 
    <h1>Let's Move Together</h1> 
 
</div> 
 

 
<div class="logo"> 
 
    <img src="http://placehold.it/160x80/"/> 
 
</div> 
 
<div class="other"> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadas</h1> 
 
    <h1>asdadadasaa</h1> 
 
</div>