绝对定位的图像越来越重叠在其他元素的响应

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>