html - CSS:响应式设计中的绝对定位

Question

来自这个 question 的第一个答案.

我有一个需要绝对位置的 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>

有什么建议吗？

Answer 1

问题说明:

如果您正在寻找元素的定位。您只需要添加 position: relative; 您的行类并且还需要调整边距。

更多信息: CSS Positions

我提供给你demo，你可以检查一次。

演示代码:

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>