Question

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

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

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

有没有办法让这两个元素放在同一个位置，而父元素在css中保持其高度和两者之间的转换，或者我将不得不使用Javascript？

我也不想设置一个明确的高度，因为你可以在子元素中添加内容来扩展父div的高度。

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

Answer 1

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果你不能使用网格，你可以通过滥用flexbox来实现类似的东西，使孩子们不灵活和全宽（以便第二个孩子溢出），然后调整第二个孩子的位置：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

最后，如果即使是flexbox也不是一个选项，那么你可以用display: inline-block实现几乎相同的东西，但正如你所看到的那样，你将失去小孩子自动接受的好处。更大的孩子的身高。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

1 个答案: