I make a slider. I want to do as the title says. This is necessary to control the slider only through the opacity . The main problem is that if the child elements are put position: absolute , then the parent collapses, and I need its frame.

 body{ display: flex; justify-content: center; align-items: center; } .wrap { position: relative; border: 2px solid red; display: flex; justify-content: space-between; } .div{ border: 1px solid; width: 100px; height: 100px; position: absolute; } 
 <div class="wrap"> <div class="div">1</div> <div class="div">2</div> <div class="div">3</div> <div class="div">4</div> </div>

    1 answer 1

    In general, the decision came at the very moment when the question was formulated. Do not disappear as good)

    In order for the parent not to collapse and it was possible to work with its frame, you need one of the child elements to set position:relative .

     body{ display: flex; justify-content: center; align-items: center; } .wrap { position: relative; border: 1px solid red; display: flex; justify-content: space-between; } .div{ border: 1px solid; width: 100px; height: 100px; position: absolute; opacity: 0; } .div:first-child{ position: relative; opacity: 1; } 
     <div class="wrap"> <div class="div">1</div> <div class="div">2</div> <div class="div">3</div> <div class="div">4</div> </div>