Question

有没有办法强制动画元素保持在另一个图像的顶部？

问题： 当您调整浏览器的大小时，所有动画元素都会水平和/或垂直滑动。注意当我调整屏幕大小时，粉红色方格div [以及其他]移动，我希望它保持在同一个地方并且不移动。

我试图在div上使用绝对位置，但这并没有停止他们在调整大小时四处走动。 如何将元素保留在图片上的某个位置？

Please use my fiddle to demonstrate your solution

HTML：

<center>
<div id="wrapper">
<img class="buildingtotal img-responsive" src="http://www.penguins-world.com/wp-content/uploads/emperor_penguin.jpg" >

<div id="animation">
<div class="bubble toprow">&nbsp;</div>

<div class="bubble toprow">&nbsp;</div>

<div class="bubble toprow">&nbsp;</div>

<div class="bubble toprow">&nbsp;</div>

<div class="bubble bottomrow">&nbsp;</div>

<div class="bubble bottomrow">&nbsp;</div>

<div class="bubble bottomrow">&nbsp;</div>

<div class="bubble bottomrow">&nbsp;</div>
</div>

        <img class="buildingsolo" src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/Puffins.jpg" >

</div>
</center>

CSS：

.toprow{top:0;}

.bottomrow{top:0; margin-top:15%;}

.bubble {
   height: 100px;
  width: 100px;
  position:absolute;
  opacity:0;
}

#animation div:nth-of-type(1) { 

    -webkit-animation: fadein 6s ease-in-out -8s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out -8s infinite alternate;
    animation:fadein 6s ease-in-out -8s infinite alternate;
}
#animation div:nth-of-type(2) { 

    -webkit-animation: fadein 6s ease-in-out 8s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 8s infinite alternate;
    animation: fadein 6s ease-in-out 8s infinite alternate;

}
#animation div:nth-of-type(3) { 

    -webkit-animation: fadein 6s ease-in-out 16s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 16s infinite alternate;
    animation: fadein 6s ease-in-out 16s infinite alternate;

}

#animation div:nth-of-type(4) { 

    -webkit-animation: fadein 6s ease-in-out 24s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 24s infinite alternate;
    animation:fadein 6s ease-in-out 24s infinite alternate;
}
#animation div:nth-of-type(5) { 

    -webkit-animation: fadein 6s ease-in-out -16s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out -16s infinite alternate;
    animation: fadein 6s ease-in-out -16s infinite alternate;

}
#animation div:nth-of-type(6) { 

    -webkit-animation: fadein 6s ease-in-out 40s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 40s infinite alternate;
    animation: fadein 6s ease-in-out 40s infinite alternate;

}


#animation div:nth-of-type(7) { 

    -webkit-animation: fadein 6s ease-in-out -24s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out -24s infinite alternate;
    animation:fadein 6s ease-in-out -24s infinite alternate;


}
#animation div:nth-of-type(8) { 

    -webkit-animation: fadein 6s ease-in-out 32s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 32s infinite alternate;
    animation: fadein 6s ease-in-out 32s infinite alternate;
}

@-webkit-keyframes fadein {
    0% {           
        opacity: 0;
    }
    66% {        
        opacity: 0;
    }
    76% {          
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}

.toprow{top:25%; }
.bottomrow{top:0%; }

.bubble:nth-child(1)
{
    background: #ff0; left:10%;    
}

.bubble:nth-child(2)
{
    background: #333; left:30%;    

}

.bubble:nth-child(3)
{
    background: #f90; left:60%;    

}
.bubble:nth-child(4)
{
    background: #e43; left:80%;    

}
.bubble:nth-child(5)
{
    background: #e38; left:10%;    

}

.bubble:nth-child(6)
{
    background: #338;left:30%;    

}
.bubble:nth-child(7)
{
    background: #fdd; left:60%;    

}
.bubble:nth-child(8)
{
    background: #53d; left:80%;    

}
}

@media(max-width:630px)
{
  #animation {display:none!important;}
  .buildingsolo {display:none !important;}
   .buildingtotal {display:block !important; top:0!important;}
}

Answer 1

使用position:relative;

将每个图片包裹在div中

<div style="position:relative;">
    <div style="position:absolute;"><!--box goes here--></div>
    <img .../>
</div>

您也可以尝试：

#wrapper {  position:relative; display:inline-block; margin:0 auto;  }

修改

确保包装器的宽度与图像的宽度相同，否则它将无效：

<div id="wrapper" style="display:inline-block;">

在图像顶部放置一个带有绝对位置的Div，以便它不会在调整大小时移动。

1 个答案: