按钮margin失效堆叠右上角，如何实现HTML页面右上角按钮垂直排列？

为什么上下margin无法生效？ #

你给每个按钮都设置了position: absolute，绝对定位的元素会脱离正常文档流，它们的位置是相对于最近的已定位父元素（这里默认是<body>）计算的。所有按钮都会默认定位到同一个起始点（右上角），互相重叠覆盖，此时margin只会改变单个按钮自身的定位偏移，无法让按钮之间产生垂直间距，所以看起来还是堆叠在一起。

正确实现右上角垂直排列按钮的方法 #

不要给每个按钮单独加绝对定位，而是把所有按钮放在一个容器里，给容器设置绝对定位到右上角，容器内部让按钮垂直排列即可：

修改后的CSS代码 #

/* 按钮容器，定位到右上角 */
.button-container {
  position: absolute;
  right: 10px;
  top: 10px; /* 可选，调整顶部间距 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 按钮之间的垂直间距，比margin更直观 */
}

.button {
  font-family: Trebuchet MS;
  font-size: 20px;
  color: #000;
  border: 2px solid black;
  text-align: center;
  background-color: transparent;
  padding: 8px;
  border-radius: 15px;
  /* 移除按钮自身的absolute定位和margin */
}

修改后的HTML代码 #

<div class="button-container">
  <a href="dinosaur.html"><button class="button">Dinosaur Game</button></a>
  <a href="slope.html"><button class="button">Slope</button></a>
  <a href="tunnel-rush.html"><button class="button">Tunnel Rush</button></a>
  <a href="2048.html"><button class="button">2048</button></a>
  <a href="ratatouille.html"><button class="button">Ratatouille</button></a>
</div>

<!-- 原有的<center>内容可保留在页面其他位置，不影响按钮容器 -->

补充说明 #

• 用flex-direction: column让容器内的按钮垂直排列，gap属性直接控制按钮间的间距，比margin更简洁，避免margin合并问题。
• 如果不想用flex，也可以给容器设置display: block，再给每个按钮设置display: block，此时按钮的上下margin就能正常生效，实现垂直排列。

内容的提问来源于stack exchange，提问作者Julian Stillwell