Mutlak konum% width öğesinde çalışmaz

Question

width50% olarak ayarlanmış bir div ve border-radius bir daire oluşturmak için var. İçinde düğmeler olarak görev yapan 3 tane başka div, ve dördüncü bir div, onu geniş olduğu kadar uzun yapma amacına hizmet ediyor.

Şimdi düğmelerimi .appContainer numaralı bölüme göre konumlandırmak istiyorum. Temel olarak, elde etmeye çalıştığım şey, bir düğmenin her zaman div'un en üst merkezinde ve diğer ikisi de sağ alt ve sol köşelerde olmasıdır.

Düğümlerime garip bir şey oluyor - ana öğeye göre konumlandırma yerine, ana div sayfadan daha küçük olduğunda, bunlar her zaman ekranın alt kısmında konumlandırılır.

İstediğim şeyi nasıl elde edeceğimize dair herhangi bir fikir takdir ediliyor.

Herhangi bir konu belirsiz ise lütfen bildirin ve ana gönderiyi düzenleyeceğim.

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

Sizin .appContainer bir position: relative stil kuralını gerekebilir. Bu şimdi ne anlama

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

kesinlikle konumlandırılmış Bu öğe içinde bir şey, kendi üst nispeten konumlanacak olan olmasıdır.

İşte size bir çalışma demo: https://jsfiddle.net/usgp8ume/