CSS Stacking Divs

Question

我有兩個動畫（在CSS）divs他們互相旋轉。我想爲中間的文字添加另一個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; 
} 

圖像>編輯的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」。你需要使用「相對」定位，而不是「絕對」。