CSS Stacking Divs

Question

我有两个动画（在CSS中）div，它们围绕彼此旋转。我想在中间添加另一个文本div。但是，如果我将div放在这两个中的任何一个中，它就会与父div一起动画。如果我尝试定位它只是位于两个圆圈之上。

HTML

<div id="ballWrapper">
    <div class="centerText"> 100</div>
    <div class="ball centerHorizontal centerVertical"></div>
    <div class="ball1 centerHorizontal centerVertical"></div>
</div>

CSS

centerText {
    position:absolute;
    left:0px;
    top:0px;
    margin-top:-500px;
    z-index:1;
}

图片＆gt; http://imgur.com/jPzUW6M

编辑 剩下的CSS代码（负余量只是我在试验，看看我是否可以让它上升或下移）

.ball {
    background-color: rgba(67,181,162,0.3);
    border: 5px solid rgba(67,181,162,0.9);
    opacity: .9;
    border-top: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 300px;
    box-shadow: 0 0 35px #43B5A2;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    -moz-animation: spin 3.5s infinite linear;
    -webkit-animation: spin 3.5s infinite linear;
}

.ball1 {
    background-color: rgba(67,181,162,0.7);
    border: 5px solid rgba(67,181,162,0.9);
    opacity: .9;
    border-top: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 300px;
    box-shadow: 0 0 15px #43B5A2;
    width: 170px;
    height: 170px;
    margin: 0 auto;
    position: relative;
    top: -195px;
    -moz-animation: spinoff 3.5s infinite linear;
    -webkit-animation: spinoff 3.5s infinite linear;
}
.header {
    width:100%;
    position:absolute;
    margin-top:-200px;

}
.centered {
     display: block;
    margin-left: auto;
    margin-right: auto 
}
#ballWrapper {
    margin-top:200px;
    z-index:0;
    text-align:center;

}

.minusMargin{
margin-top:-100px;  
}

.centerText {
    position:absolute;
left:0px;
top:0px;
margin-top:-500px;
z-index:1;
}

Answer 1

删除#ballWrapper和.centerText的当前样式。像这样：

#ballWrapper {
   margin: 200px auto; 
   position: relative;
}

.centerText {
    line-height: 200px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
}

Demo

Answer 2

http://jsfiddle.net/3J8yt/

HTML

<div id="ballWrapper">

    <div class="ball centerHorizontal centerVertical"></div>
    <div class="ball1 centerHorizontal centerVertical">
           <div class="centerText">100</div>
    </div>
</div>

CSS

.centerText {
    position:absolute;
left:50%;
top:50%;
z-index:1;
}

这让你非常接近你想要的。相应地调整％。

Answer 3

由于子元素从父元素继承CSS，因此需要“清除”这些值。对于动画序列，.centerText类的值将显示为“none”。而且你需要使用“相对”定位，而不是“绝对”。