다른 원형 구간의 경계에 div를 놓습니다.

Question

태양계를 만들고 싶습니다. 지금까지 태양 주위에 두 개의 div를 사용했습니다. 궤도 경로를 지정하는 div 및 해당 경로를 따르는 지구를 지정합니다. 문제는 경계 반경이 50% 인 #earth-orbit div에 #earth div를 배치하려는 것입니다. 이 같은 #earth 주위 #earth-orbit을 포장 한 : 그런 다음

<div id='sun'> 
</div> 

<div id='earth-orbit'> 
    <div id='earth'> 
    </div> 
</div> 

, 내 CSS에서 내가 지금까지이 있습니다

#sun 
{ 
    margin: auto; 
    height: 200px; 
    width: 200px; 
    background-color: orange; 
    position: absolute; 
    border-radius: 50%; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

#earth-orbit 
{ 
    margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0; 
    position: absolute; 
    border-width: 2px; 
    border-style: dotted; 
    border-color: white; 
    border-radius: 50%; 

    height: 500px; 
    width: 500px; 
} 

#earth 
{ 
    height: 50px; 
    width: 50px; 
    background-color: white; 
    border-radius: 50%; 
} 

은 어떻게 #earth-orbit의 곡선 경계 위에 #earth 배치합니까?

편집 : 당신이 동시에 화면의 중앙에 전체 시스템을 유지하려고하지 않을 때 그것을 쉽게

Answer 1

경우 단지 당신이 할 수있는 절대 위치 #earth 정적 이미지를 만들 원하는 :

#earth 
    { 
    position:absolute; 
    top: -25px; 

    height: 50px; 
    width: 50px; 
    background-color: white; 
    border-radius: 50%; 
    } 

과에 대해 잊지 마세요 : 나는 다른 주에 이것을보고해서

#earth-orbit 
{ 
    top: 25px; left: 25px; bottom: 25px; right: 25px; 
    position: absolute; 
} 

Answer 2

<style> 
#sun 
{ 
    margin: auto; 
    height: 200px; 
    width: 200px; 
    background-color: orange; 
    position: absolute; 
    border-radius: 50%; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

#earth-orbit 
{ 
    margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0; 
    position: absolute; 
    border-width: 2px; 
    border-style: dotted; 
    border-color: blue; 
    border-radius: 50%; 

    height: 500px; 
    width: 500px; 
} 

#earth 
{ 
position:absolute; 
left:130px; 
height: 50px; 
    width: 50px; 
    background-color: red; 
    border-radius: 50%; 
} 
</style> 


<div id='sun'> 
</div> 

<div id='earth-orbit'> 
    <div id='earth'> 
    </div> 
</div>