％幅の要素で絶対位置が機能しない

Question

widthが50%に設定され、border-radiusが50%に設定されているdivがあります。内部には、ボタンとして機能する他の3つのdivと、幅が広いようにする目的に役立つ4つ目のdivがあります。

今度は、.appContainerとの相対的な位置にボタンを配置したいと考えています。基本的に私が達成しようとしているのは、あるボタンが常にdivの上の中央にあり、他の2つは右下と左隅にあるということです。

親要素に基づいて配置するのではなく、親divがページよりも小さい場合は、常に画面の下部に配置されます。

私が欲しいものを達成するためのアイディアは高く評価されています。

不明な点がある場合はお知らせください。メインの投稿を編集します。

body { 
 
    background-color: gray; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.appContainer { 
 
    width: 50%; 
 
    margin: 0 25%; 
 
    background-color: white; 
 
    border-radius: 50%; 
 
} 
 

 
.heightElement { 
 
    height: 0; 
 
    padding-bottom: 100%; 
 
} 
 

 
#button1, #button2, #button3 { 
 
    position: absolute; 
 
    background-color: red; 
 
    padding: 1em; 
 
    border-radius: 50%; 
 
} 
 

 
#button1 { 
 
    right: 50%; 
 
    top: 0%; 
 
} 
 

 
#button2 { 
 
    right: 25%; 
 
    top: 100%; 
 
} 
 

 
#button3 { 
 
    right: 75%; 
 
    top: 100%; 
 
}

<div class="appContainer"> 
 
    <div class="heightElement"></div> 
 
    <div id="button1">Button 1</div> 
 
    <div id="button2">Button 2</div> 
 
    <div id="button3">Button 3</div> 
 
</div>

Answer 1

あなた.appContainerposition: relativeスタイルルールが必要になる場合があります。

.appContainer { 
    position: relative; // Try adding this line. 
    width: 50%; 
    margin: 0 25%; 
    background-color: white; 
    border-radius: 50%; 
} 

これは、絶対に配置されているこのアイテム内のすべてのものが、その親に対して相対的に配置されることを意味します。

はここにあなたのための作業のデモです：https://jsfiddle.net/usgp8ume/