如何仅使用 css 将 div 内的按钮从该 div 中移出

Question

我在 div 内有两个按钮，在 div 外有另一个按钮。我试图将 div 内的按钮之一移到位于 div 外部的按钮下方。请参阅下面的示例代码。

<div class="container"> 
<button id="Reject">Reject</button>
<button id="Accept">Accept</button>
</div>
<button id="Manage">Settings</button>

在上面的示例中，我需要将“拒绝”按钮从 div 中取出，并使用 CSS 将其添加到设置按钮下方。我无法控制 HTML。

请帮忙。

我尝试了定位和：黑客攻击后。但没有任何效果

Answer 1

如果有共同父母，您可以使用

display: contents;

显示：内容

这些元素本身不会产生特定的盒子。它们被伪盒子和子盒子取代。请注意，CSS Display Level 3 规范定义了内容值应如何影响“不寻常元素”——不纯粹由 CSS 框概念呈现的元素，例如替换元素 显示：内容 - MDN

查看 caniuse.com 的支持

.container {
  display: contents;
}

.parent {
  display: flex;
  flex-direction: column;
  align-items: start;
}

#Reject {
  order: 3;
}

<div class="parent">
  <div class="container">
    <button id="Reject">Reject (first in dom, last on screen)</button>
    <button id="Accept">Accept</button>
  </div>
  <button id="Manage">Settings</button>
</div>