Absolute position does not work on elements with % width

Question

I have a div that has width set to 50%, and a border-radius of 50% in order to make it a circle. Inside there are 3 other divs that serve as buttons, and a fourth div, that serves the purpose of making it as tall as it is wide.

Now I want to position my buttons relative to the div .appContainer. Basically what I'm trying to achieve is that one button is always at the top center of the div, and the other two are at the bottom right and left corners.

Now something strange happens to my buttons - instead of positioning according to the parent element, when the parent div is smaller than the page, they are always positioned at the bottom of the screen.

Any ideas on how to achieve what I want to are appreciated.

If anything is unclear please let me know and I'll edit the main post.

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

Your .appContainer might need a position: relative style rule.

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

What this now means, is that anything within this item that is positioned absolutely, will be positioned relatively to its parent.

Here's a working demo for you: https://jsfiddle.net/usgp8ume/