CSS: absolute positioning in responsive design - html

Question

From the first answer for this question.
I have a div that need to have an absolute position but the problem is that I have a responsive website and I want this div to be automatically placed in a row.
Some code:
<div class="row">
<h2 class="page-header" > animation:</h2>
</div>
<div class="row"> <!--THIS SHOULD BE JUST AFTER THE PREVIOUS DIV -->
<div class="fadein"> <!-- THIS DIV HAVE AN OBSOLUTE POSITION -->
<img id="f3" src="http://i.imgur.com/R7A9JXc.png">
<img id="f2" src="http://i.imgur.com/D5yaJeW.png">
<img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>
</div>
Any suggestion ?

Answer 1

Issue Explaination:
If your looking for positioning to your elements. Simply you need to add position: relative; your row class and need to adjust the margin also.
More Information: CSS Positions
I'm providing you demo can check it once.
DEMO CODE:
h1,h2,h3,h4,h5,h6 {
text-align: center;
margin: 0;
padding: 0;
}
.row {
position: relative;
margin-bottom: 20px;
}
.fadein {
position:absolute;
top:0px;
left:50%;
margin:auto;
}
.fadein img {
position:absolute;
left:-65px;
top:0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
}
#-webkit-keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
#f1 {
background-color: lightblue;
}
#f2 {
-webkit-animation-delay: -4s;
background-color: yellow;
}
#f3 {
-webkit-animation-delay: -2s;
background-color: lightgreen;
}
<div class="row">
<h2 class="page-header" > animation:
</h2>
</div>
<div class="row">
<!--THIS SHOULD BE JUST AFTER THE PREVIOUS DIV -->
<div class="fadein">
<!-- THIS DIV HAVE AN OBSOLUTE POSITION -->
<img id="f3" src="http://i.imgur.com/R7A9JXc.png">
<img id="f2" src="http://i.imgur.com/D5yaJeW.png">
<img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>
</div>
<div class="row">
<!--THIS SHOULD BE JUST AFTER THE PREVIOUS DIV -->
<div class="fadein">
<!-- THIS DIV HAVE AN OBSOLUTE POSITION -->
<img id="f3" src="http://i.imgur.com/R7A9JXc.png">
<img id="f2" src="http://i.imgur.com/D5yaJeW.png">
<img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>
</div>