絕對定位的圖像越來越重疊在其他元素的響應

Question

我試圖創建3個div的寬度爲100％，高度爲100％，以便每個div佔據整個屏幕。每個div都有一個文字，圖像放在整個div的底部中間。

<div class="first"> 
    <p>Some text is inserted here</p> 
    <img src="some-image" class="img img-responsive"/> 
</div> 
<div class="second"> 
    <p>Some text is inserted here</p> 
     <img src="some-image" class="img img-responsive"/> 
</div> 
<div class="third"> 
    <p>Some text is inserted here</p> 
    <img src="some-image" class="img img-responsive"/> 
</div> 

因此，我給了圖像的絕對定位和我的主要div的相對位置，並給一些百分比值，以絕對定位圖像，使他們在即使屏幕大小的底部中心對齊。當我調整圖片的大小也越來越調整，因爲它是敏感窗口

.first{ 
    width : 100%; 
    height : 100%; 
    position : relative; 
} 
.second{ 
    width : 100%; 
    height : 100%; 
    position : relative; 
} 
.third{ 
    width : 100%; 
    height : 100%; 
    position : relative; 
} 
img{ 
    position : absolute; 
    top : 60%; 
} 

這纔是我的問題，因爲當圖像尺寸越來越大是絕對定位，是越來越上的文字重疊。我應該如何在響應式屏幕中擺脫這種重疊？在此先感謝:)

Answer 1

如果您正在創建一個響應式佈局，CSS Flexbox模塊是一個非常好的開始。如果我明白你試圖正確地實現佈局的描述，這裏是你如何可能接近創造Flexbox的該佈局的例子：

body { 
 
display: flex; 
 
flex-direction: column; 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
div { 
 
flex: 1 0 100%; 
 
display: flex; 
 
flex-direction: column; 
 
justify-content: flex-end; 
 
align-items: center; 
 
min-height: 100vh; 
 
} 
 

 
.first{ 
 
background-color:red; 
 
} 
 

 
.second{ 
 
background-color:yellow; 
 
} 
 

 
.third { 
 
background-color:green; 
 
} 
 

 
img { 
 
width: 40vw; 
 
height: 10vw; 
 
margin-bottom:12px; 
 
background-color: rgba(0,0,0,0.3); 
 
border: 4px solid rgba(0,0,0,0.4); 
 
}

<div class="first"> 
 
<p>Some text is inserted here</p> 
 
<img src="some-image" class="img img-responsive"/> 
 
</div> 
 

 
<div class="second"> 
 
<p>Some text is inserted here</p> 
 
<img src="some-image" class="img img-responsive"/> 
 
</div> 
 

 
<div class="third"> 
 
<p>Some text is inserted here</p> 
 
<img src="some-image" class="img img-responsive"/> 
 
</div>