Question

我有一个div width设为50%，border-radius为50%以使其成为一个圆圈。里面有另外3个div作为按钮，第4个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/

绝对位置不适用于％width

1 个答案: