CSS：在响应式设计中的绝对定位

我有一个div需要有一个绝对的位置，但问题是我有一个响应网站，我想这个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>

什么建议吗？

来源

2016-07-28 farhawa

设置位置：相对于上.row DIV？你想要做什么？ – KCarnaille

你的演示在哪里？和你的CSS代码？ –

我检查了您提供的参考链接，可能我知道您到底在找什么？ –

问题阐释：

如果您寻找定位到您的元素。只需要添加位置：相对;你的排课也需要调整边距。

更多信息：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>

来源

2016-07-28 13:29:31

CSS：在响应式设计中的绝对定位

回答

相关问题