CSS：レスポンシブデザインにおける絶対配置

Question

最初の回答はquestionです。

私は絶対的な位置を持つ必要があるdivがありますが、問題は私が応答性の高いWebサイトを持っていて、このdivが自動的に行に配置されるようにすることです。

いくつかのコード：

 <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> 

任意の提案？

Answer 1

課題、について説明：

あなたがあなたの要素に位置決めするために探している場合。単にポジションを追加する必要があります。あなたの行クラスとマージンも調整する必要があります。

詳細情報：CSS Positions

私はあなたが一度それを確認することができますデモを提供しています。

デモコード：

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>