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; 
} 

Image>http://imgur.com/jPzUW6M

EDIT Остальной код 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». И вам нужно использовать «относительное» позиционирование, а не «абсолютное».