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 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：响应式设计的绝对定位

1 个答案: