如何仅用CSS将div内的按钮移至容器外并置于指定按钮下方

方案1：利用display: contents + Flex布局（推荐，灵活适配） #

这个方法通过将.container的盒子模型“移除”，让内部的#Reject和#Accept成为.container父元素的直接子元素，再通过Flex的order属性调整元素顺序，实现将#Reject移到#Manage下方的效果。

/* 让.container的子元素直接成为其父元素的子元素 */
.container {
  display: contents;
}

/* 给.container的父元素设置Flex布局（假设父元素是body，若不是则替换为实际父元素选择器） */
body {
  display: flex;
  flex-direction: column;
}

/* 调整元素顺序：Accept按钮在前，Manage按钮居中，Reject按钮在最后 */
#Accept {
  order: 1;
}

#Manage {
  order: 2;
}

#Reject {
  order: 3;
}

注意事项：

• 如果.container原本有padding、border等样式，需要将这些样式转移到#Accept上，因为display: contents会让.container不再渲染自身的盒子模型。
• display: contents兼容所有现代浏览器（Chrome、Firefox、Safari 13.1+、Edge），若需兼容旧版IE则不适用。

方案2：绝对定位（适合固定尺寸布局） #

如果无法使用Flex布局，可通过绝对定位手动调整#Reject的位置，将其放到#Manage下方。这个方法需要提前知道#Manage的尺寸和位置，适合布局固定的场景。

/* 给Manage按钮设置相对定位，作为Reject按钮定位的参考 */
#Manage {
  position: relative;
  /* 给Reject按钮预留空间，避免覆盖其他内容 */
  margin-bottom: 48px; /* 数值等于Reject按钮的高度 + 间距 */
}

/* 给.container设置相对定位，确保Reject按钮的绝对定位基于.container */
.container {
  position: relative;
}

/* 定位Reject按钮到Manage按钮下方 */
#Reject {
  position: absolute;
  top: calc(100% + 20px); /* 100%是.container的高度，20px是间距 */
  left: 20px; /* 需和Manage按钮的left值一致，根据实际布局调整 */
  width: 120px; /* 可选，让Reject按钮和Manage按钮宽度一致 */
}

注意事项：

• 若页面布局（如#Manage的尺寸、位置）发生变化，需要手动调整定位数值，灵活性较差。
• 需确保#Reject不会覆盖页面其他内容，可通过给#Manage设置margin-bottom预留空间。

内容的提问来源于stack exchange，提问作者Govind Ramesh