html - 停止具有影响其他元素位置的相对位置的元素

Question

我有一个元素 (div2)，我想将其定位在 div1 的正下方，我想使用 position:relative 来做到这一点。

当我使用position:relative时，div2显然会影响div1和div3的位置，但是我希望div2不影响它们的位置，即div1和div3的位置应该与div2 已删除或代码中包含 div2。

这可以通过 position: absolute 来实现，因为它将元素带出文档流，但是我失去了我觉得我需要(或使它更容易)的相对定位将 div2 降低到 div1 的正下方。

#middle-row{
  margin-top: 25px;
  height: 60px;
  width: 100vw;
  display: flex;
  justify-content: space-around; }

.block {
  height: 100%;
  width: 10vw;
  border: 1px solid white;
  border-radius: 10px;
  position: relative;
  display: inline-block;
  background-color: blue;
  color: black }

.block span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 85%;
  width: max-content; }

.block .block-input {
  background-color: green;
  position: relative; }

<div id="middle-row">
  <a href="#">
    <div class="block"><span>Div1</span></div>
    <div class="block block-input"><span>Div2</span></div> 
  </a>

  <a href="#">
    <div class="block"><span>Div3</span></div>
  </a>
</div>

Answer 1

CSS-Grid 可以在 flexbox 的帮助下做到这一点。

#middle-row {
  margin-top: 25px;
  height: 60px;
  width: 100vw;
  display: grid;
  justify-content: space-around;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 10vw;
}

.col {
  display: flex;
  flex-direction: column;
  grid-row: 1 / span 2;
}

.block {
  height:10vw;
  width: 10vw;
  border: 1px solid white;
  border-radius: 10px;
  position: relative;
  background-color: blue;
  color: black
}

.block span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 85%;
  width: max-content;
  color:white;
}

.block .block-input {
  background-color: green;
  position: relative;
}

<div id="middle-row">
  <a href="#" class="col">
    <div class="block"><span>Div1</span></div>
    <div class="block block-input"><span>Div2</span></div>
  </a>

  <a href="#">
    <div class="block"><span>Div3</span></div>
  </a>
</div>