绝对定位元素 - 需要切换可见性

Question

尝试将两个元素放在同一位置以在状态之间切换。

父元素是相对定位的，子元素是绝对的。 这样做的问题是我失去了父 div 的高度。

我知道我可以将这些子元素设置为浮动元素，但我需要它们位于同一位置，以便在同一位置的切换上显示一个和隐藏一个之间进行转换。

有没有办法将这两个元素放在同一个位置，而父元素在 css 中保持其高度和两者之间的过渡，还是我必须使用 Javascript？

我也不想设置显式高度，因为您可以在子元素内添加内容，这将扩展父 div 的高度。

<div class='parent'>
  <div class='child1'>
  <div class='child2'>
</div>
<button>Toggle Child</button>

Answer 1

如果您的浏览器支持要求允许使用CSS grid，您可以创建一个 1x1 网格并将两个子元素放入同一个网格单元中：

$(function () {
  $("button").click(function () {
    $(".parent").toggleClass("show-child2");
  });
});

.parent {
  display: grid;
}
.parent > * {
  grid-area: 1 / 1;
}

.parent {
  background: green;
  padding: 20px;
}
.child1 {
  background: #ff8080;
}
.child2 {
  background: #8080ff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear, visibility 0s 0.5s;
}
.parent.show-child2 .child2 {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='child1'>
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  </div>
  <div class='child2'>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>
<button>Toggle Child</button>

如果不能使用grid，可以通过滥用flexbox实现类似的效果，让children不灵活和full width（让第二个child溢出），然后调整第二个child的定位：

$(function () {
  $("button").click(function () {
    $(".parent").toggleClass("show-child2");
  });
});

.parent {
  display: flex;
}
.parent > * {
  width: 100%;
  flex: none;
}
.child2 {
  position: relative;
  left: -100%;
}

.parent {
  background: green;
  padding: 20px;
}
.child1 {
  background: #ff8080;
}
.child2 {
  background: #8080ff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear, visibility 0s 0.5s;
}
.parent.show-child2 .child2 {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
    <div class='child1'>
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    </div>
    <div class='child2'>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</div>
<button>Toggle Child</button>

最后，如果连 flexbox 都不是一个选项，那么您可以使用 display: inline-block 实现几乎相同的效果，但正如您所见，您将失去较小孩子自动占据较大孩子身高的好处。

$(function () {
  $("button").click(function () {
    $(".parent").toggleClass("show-child2");
  });
});

.parent {
  white-space: nowrap;
}
.parent > * {
  display: inline-block;
  width: 100%;
  white-space: normal;
  vertical-align: top;
}
.child2 {
  position: relative;
  left: -100%;
}

.parent {
  background: green;
  padding: 20px;
}
.child1 {
  background: #ff8080;
}
.child2 {
  background: #8080ff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear, visibility 0s 0.5s;
}
.parent.show-child2 .child2 {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
    <div class="wrapper"><div class='child1'>
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    </div></div><div class="wrapper"><div class='child2'>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div></div>
</div>
<button>Toggle Child</button>

您如何解决这个问题取决于您的用例，您是要淡出另一个孩子以确保只有一个可见，还是创建具有 100% 高度的额外背景（伪）元素（现在可以使用，因为.childX 元素为父元素提供了一个内在的高度）或其他东西。