如何将2个图像置于圆形div中，同时还将它们重叠？

Question

我一直在搞一个引导模板......非常标准的行有3个项目。

每个行项目都变成了具有圆形背景的div。 现在，我试图拍摄2张图像（因此我可以为它们制作动画）并将它们放在div中。

我找到了一些方法可以解决它...但我想知道最好的方法是什么？

我希望能够控制分层＆amp;确保他们始终垂直居中。

绝对定位其中一个现在正在另一个的中心...

HTML

y = df['PP04-O3N2SNpos log(O/H)+12'] - df['nuclear metallicity']
yerr = np.array([df['negative error!'],df['positive error!']]).T
x = df['NED calculated virgo infall distance in Kpc']

plt.errorbar(x,y,yerr,fmt = 'r^')
plt.xlabel('Distance from center in kpc')
plt.ylabel('PP04-O3N2SNpos log(O/H)+12')
plt.title('Central metallicity vs SN metallicity')
plt.show()

CSS

<div class="col-lg-4">
            <div class="feature-icon">
                <div id="phone">

                    <img class="behind" src="img/svg/phone.svg" width="40">
                    <img src="img/svg/pocket.svg" width="70">
                </div>
            </div>

这就是现在的样子。

Answer 1

我真的不明白你的问题。但是，使用绝对位置完全控制容器内的DIV是为了使父容器相对。

HTML

<div id="parent-container">
     <div id="animated-object1" class="object"></div>
     <div id="animated-object2" class="object"></div>
     <div id="animated-object3" class="object"></div>
</div>

CSS

#parent-container{
   position:relative;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin: auto;
   width:100%;
   height:500px;
    border:1px solid red;
}

.object{
   position: absolute;
    width:50px;
    height:50px;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin: auto;
    border: 1px solid green;
}
#animated-object1{
  left:300px;
  border:1px solid blue;
}

JavaScript - jQuery - onclick-动画语法

$('#parent-container').on('click', function(){
    $('#animated-object1').animate({
      left: "0px"
    })
})   

http://jsfiddle.net/9Lufvdfn/4/