絕對定位的元素-需要切換可見性

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> 

如果您不能使用網格，則可以通過濫用flexbox，使子級不靈活且全寬（以使第二個子級溢出），然后調整第二個子級的位置，來實現類似的目的：

 $(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元素.childX提供一個固有的高度），或其他。