Absolute positioned elements - Need to toggle visibility

Question

Trying to place two elements in the same spot to toggle between states.

Parent element is relatively positioned and child elements are absolute. The problem with this is I lose the height of my parent div.

I know I could set these children elements as floated elements but I need them to be in the same spot to transition between showing one and hiding one on toggle that appear in the same spot.

Is there a way to have these two elements placed at the same spot, whilst the parent element maintains its height and transition between the two in css or am I going to have to use Javascript?

I also don't want to set an explicit height as you can add content inside the child elements that will expand the height of the parent div.

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

Answer 1

If your browser support requirements allow using CSS grid , you can create a 1x1 grid and put both children into the same grid cell:

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

If you can't use grid, you can achieve something similar by abusing flexbox, making the children inflexible and full width (so that the second child overflows), and then adjust the positioning of the second 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> 

Finally, if even flexbox isn't an option, then you can achieve almost the same thing with display: inline-block , but as you see you'll lose the benefit that the smaller child automatically takes the bigger child's height.

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

How you solve that depends on your use case, whether you want to fade out the other child to make sure only one is visible, or create extra background (pseudo-)elements that have 100% height (which will work now, because the .childX element provide an intrinsic height to the parent), or something else.