Absolute positioned image getting overlapped on the other elements in responsive

Question

I'm trying to create 3 div's with a width of 100% and height is 100% so that every div occupies the entire screen. Every div has a text with an image placed at the bottom middle of the entire 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>

Hence I gave the images absolute positioning and my main div's relative positioning and gave some percentage values to the absolutely positioned images, so that they are aligned properly at the bottom center even when the screen is resized.

.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%;
 }

Here comes my problem when I resize the window the image is also getting resized as it is responsive and as it is absolutely positioned when the image size is getting bigger, It is getting overlapped on the text. How should I get rid of this overlapping in responsive screens? thanks in advance :)

Answer 1

If you are creating a responsive layout, CSS Flexbox module is a very good place to start. If I have understood the description of the layout you are trying to achieve correctly, here is an example of how you might approach creating that layout in 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>