如何将元素定位在与另一个元素相同的位置？

Question

单击“ Hello”按钮后，我是新的“ hello”按钮，该按钮将显示在与上一个按钮完全相同的位置上？

  const rightDiv = document.querySelector('#rightDiv');
  const leftButton = document.querySelector('#leftButton');


  function myFunction() {
    rightDiv.style.display = "none";
    leftButton.style.display = "block";  }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <div class="col" style="height: 9vh; border: 1px solid black; width: 100%">
    <button id="leftButton" style="display: none"> Hello</button>

  </div>

  <div id="rightDiv" class="col" style="height: 9vh; border: 1px solid black">
    <button onclick="myFunction()"> Hello</button>
  </div>

</div>

编辑：我想将位置设置为与另一个按钮相同，以使该按钮看起来像是从未移动过

Answer 1

如果为none属性指定了display，则不会生成任何框。此外，如果没有与元素 ^[1] 相关联的CSS布局框，则offsetWidth，offsetHeight属性等将返回0。

  

9.2.4'display'属性 ^[2]

     

此值导致元素不出现在格式结构中（即，在视觉媒体中，该元素不生成任何框且对布局没有影响）。后代元素也不生成任何框。元素及其内容将从格式化结构中完全删除。通过在子孙上设置display属性，不能覆盖此行为。

     

请注意，显示为“ none”不会创建不可见的框；它根本不会创建任何盒子。 CSS包括使元素能够在格式结构中生成影响格式但本身不可见的框的机制。有关详细信息，请查阅可见性部分。

因此，请使用visibility属性而不是display属性。 visibility属性可用于使元素生成的框不可见并影响布局。

  

11.2可见性：'visibility'属性 ^[3]

     

visibility属性指定是否渲染由元素生成的框。不可见的框仍会影响布局（将display属性设置为“ none”以完全禁止框的生成）。值具有以下含义：

     

  
• 隐藏   生成的框是不可见的（完全透明，未绘制任何内容），但仍会影响布局。此外，如果元素的后代具有“可见性：可见”，则它们将是可见的。
  

Bootstrap 4使用Flexbox进行网格布局，因此您可以使用order属性来控制弹性项目的顺序 ^[4] 。

  

网格系统 ^[4]

     

Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的，具有完全的响应能力。下面是一个示例，并深入研究了网格如何组合在一起。

从上面，您可以使用visibility和order属性来完成此操作：

const rightDiv = document.querySelector('#rightDiv');
const leftButton = document.querySelector('#leftButton');


function myFunction() {
  rightDiv.style.visibility = "hidden";
  leftButton.style.visibility = "visible";
  leftButton.parentElement.style.order = 1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">

  <div class="col" style="height: 9vh; border: 1px solid black; width: 100%">
    <button id="leftButton" style="visibility: hidden"> Hello</button>

  </div>

  <div id="rightDiv" class="col" style="height: 9vh; border: 1px solid black">
    <button onclick="myFunction()"> Hello</button>
  </div>

</div>

---

如果您希望#leftButton的宽度为100%，则可以使用伪元素和align-items属性来实现。

const rightDiv = document.querySelector('#rightDiv');
const leftButton = document.querySelector('#leftButton');


function myFunction() {
  rightDiv.style.display = "none";
  leftButton.style.display = "block";
}

/* Position adjustment by pseudo-elements and `margin` for` padding` etc ... */

.leftColumn::before {
  flex-basis: 50%;
  content: "";
}

#leftButton {
  margin: 0 15px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">

  <div class="col d-flex align-items-start leftColumn" style="height: 9vh; border: 1px solid black; width: 100%"> <!-- Use flexbox -->
    <button id="leftButton" style="display: none"> Hello</button>
  </div>

  <div id="rightDiv" class="col" style="height: 9vh; border: 1px solid black">
    <button onclick="myFunction()"> Hello</button>
  </div>

</div>

---

参考：

1. CSSOM View Module
2. Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification