绝对定位元件的开关 position

Question

如果 div1 具有display:none ，我正在寻找将 div2 转移到 div1 的 position 的解决方案。 发生这种情况时，我希望 div3 转移到 div2 的 position，因为它已经转移到 div1 的 position。 如何在 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

你可以这样做：

使用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>

Answer 2

您需要的所有 css 是：

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

如果您添加#bg{ padding-top: 56.25%;}您会在图像上方看到一个空白区域
如果你应用img{ height: 100%; width: 100%;} img{ height: 100%; width: 100%;}它会破坏图像的纵横比
如果您将position: absolute应用于您失去控制权的任何项目
如果您应用position: fixed到任何元素，它将真的是 static

你不需要做任何时髦的事情。 您想要的行为对于 html 来说是自然的，停止破坏它