在另一個圓形div的邊框上放置一個div

Question

我想製作一個太陽系，並且我迄今爲止在太陽周圍使用了兩個div;一個div來指定軌道路徑和地球，以遵循該路徑。問題是我想將#earth div放到#earth-orbit div上，該div的邊界半徑爲50%。我纏#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到#earth-orbit的曲面邊界？

編輯：這很容易做到這一點，當你不是試圖整個系統同時保持在屏幕中間

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>