html - 绝对位置不适用于具有 % 宽度的元素

Question

我有一个 div，其 width 设置为 50%，border-radius 为 50% 为了使它成为一个圆圈。里面还有另外 3 个用作按钮的 div，还有第四个 div，用于使它的高度和宽度一样。

现在我想相对于 div .appContainer 定位我的按钮。基本上我想要实现的是一个按钮始终位于 div 的顶部中心，另外两个按钮位于右下角和左下角。

现在我的按钮发生了一些奇怪的事情——而不是根据父元素定位，当父 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

您的 .appContainer 可能需要一个 position: relative 样式规则。

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

现在这意味着，绝对定位的此元素中的任何内容都将相对于其父级定位。

这是为您准备的工作演示:https://jsfiddle.net/usgp8ume/