Switch position of absolute positioned elements

Question

I was looking for a solution to shift div2 to div1's position if div1 has display:none . When this happens, I want div3 to shift to div2's position as its already been shifted to div1's position. How do I achieve this in CSS or jquery? After its been shifted, can I reactive div1 as display:block ?

 #bg { z-index: 1; position: fixed; width: 100%; padding-top: 56.25%; left: 0%; } #bg-1 { position: absolute; top: 0px; left: 100%; height: 100%; width: 100%; display: none; } #bg-2 { position: absolute; top: 0px; left: 177%; height: 100%; width: 100%; } #bg-3 { position: absolute; top: 0px; left: 254%; height: 100%; width: 100%; }

 <div id="bg">
        <img id="bg-1" src="img/a.png" />
        <img id="bg-2" src="img/b.png" />
        <img id="bg-3" src="img/c.png" />
</div>

Answer 1

You can do it like this:

You have a bit of problem with using position: absolute; and left in % , but this is solution if you are using it this way:

    if ($("#bg-1").css('display') == 'none') {
// if bg1 is display none
    
    $("#bg-2").css('display', "none");
// put bg-2 do display  none also to be able to read % in left,
// this wont work  without this, because  if elements is displayed it will 
//show this CSS value in pixels, current position in screen

      console.log($("#bg-2").css('left'));
      console.log($("#bg-1").css('left'));
      
      var bg1Pos = $("#bg-1").css('left');
      var bg2Pos = $("#bg-2").css('left');
 // read left value from CSS     

      $("#bg-1").css('left', bg2Pos);
      $("#bg-2").css('left', bg1Pos);
// switch them    
 
    $("#bg-2").show();
//show bg-2 back
    }

Working example:

 if ($("#bg-1").css('display') == 'none') { $("#bg-2").css('display', "none"); console.log($("#bg-2").css('left')); console.log($("#bg-1").css('left')); var bg1Pos = $("#bg-1").css('left'); var bg2Pos = $("#bg-2").css('left'); $("#bg-1").css('left', bg2Pos); $("#bg-2").css('left', bg1Pos); $("#bg-2").show(); }

 #bg-1 { position: absolute; top: 0px; left: 10%; height: 100%; width: 100%; display: none; } #bg-2 { position: absolute; top: 0px; left: 20%; height: 100%; width: 100%; } #bg-3 { position: absolute; top: 0px; left: 30%; height: 100%; width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bg"> <div id="bg-1">bg-1</div> <div id="bg-2">bg-2</div> <div id="bg-3">bg-3</div> </div>

Answer 2

all css you need is:

#bg img { width: 100%; display: block}
#bg-1 { display: none; }

if you add #bg{ padding-top: 56.25%;} you get a blank space above images
if you apply img{ height: 100%; width: 100%;} img{ height: 100%; width: 100%;} it will smash aspect ratio of your images
if you apply position: absolute to any item you loose control of it
if you apply position: fixed to any element it will be really static

You don't need do any funky stuff. Behaviour you want is natural for html, just stop breaking it