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

이미지>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> 

이에 당신이 아주 가까이 가져

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

CSS 무엇 네가 원해. 그에 따라 %를 조정하십시오.

Answer 3

자식 요소가 부모로부터 CSS를 상속하므로이 값을 "지워야"합니다. 애니메이션 시퀀스의 경우 .centerText 클래스의 값은 "none"으로 읽습니다. 그리고 "절대"가 아닌 "상대적인"위치 지정을 사용해야합니다.