Переключить положение элементов с абсолютным позиционированием

Question

Я искал решение для сдвига div2 в позицию div1, если div1 имеет display:none. Когда это произойдет, я хочу, чтобы div3 переместился в позицию div2, поскольку он уже был перемещен в позицию div1. Как мне достичь этого в CSS или jquery? Могу ли я реагировать на div1 после его сдвига как 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

все css вам нужно:

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

если вы добавите #bg{ padding-top: 56.25%;}, вы получите пустое место над изображениями если вы примените img{ height: 100%; width: 100%;}, соотношение сторон ваших изображений будет sma sh если вы примените position: absolute к любому элементу, над которым вы теряете контроль если вы примените position: fixed к любому элементу, это будет действительно stati c

Вам не нужно делать ничего фанкового. Поведение, которое вы хотите, естественно для html, просто перестаньте его нарушать

Answer 2

Вы можете сделать это так:

У вас есть небольшая проблема с использованием position: absolute; и left в %, но это решение, если вы используете его таким образом:

    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
    }

Рабочий пример:

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>