CSS: absolute positioning in responsive design

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 ?

Set position: relative on the .row div ? What do you want to do precisely? — KCarnaille, Jul 28 '16 at 13:04
I have checked your given reference link and may I know what exactly you are looking for ? — Sayed Rafeeq, Jul 28 '16 at 13:20

score 1 · Answer 1 · answered Jul 28 '16 at 13:29

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>

CSS: absolute positioning in responsive design

1 Answers1