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>

Answer 2

检查子元素是否具有绝对位置

停止相对位置会影响其他元素位置的元素

2 个答案: