[英]Switch position of absolute positioned elements
I was looking for a solution to shift div2 to div1's position if div1 has display:none
.如果 div1 具有
display:none
,我正在寻找将 div2 转移到 div1 的 position 的解决方案。 When this happens, I want div3 to shift to div2's position as its already been shifted to div1's position.发生这种情况时,我希望 div3 转移到 div2 的 position,因为它已经转移到 div1 的 position。 How do I achieve this in CSS or jquery?
如何在 CSS 或 jquery 中实现这一点? After its been shifted, can I reactive div1 as
display:block
?转移后,我可以将 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>
You can do it like this:你可以这样做:
You have a bit of problem with using position: absolute;
使用
position: absolute;
有一点问题。 and left
in %
, but this is solution if you are using it this way:并
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
}
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>
all css you need is:您需要的所有 css 是:
#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如果您添加
#bg{ padding-top: 56.25%;}
您会在图像上方看到一个空白区域
if you apply img{ height: 100%; width: 100%;}
如果你应用
img{ height: 100%; width: 100%;}
img{ height: 100%; width: 100%;}
it will smash aspect ratio of your images img{ height: 100%; width: 100%;}
它会破坏图像的纵横比
if you apply position: absolute
to any item you loose control of it如果您将
position: absolute
应用于您失去控制权的任何项目
if you apply position: fixed
to any element it will be really static如果您应用
position: fixed
到任何元素,它将真的是 static
You don't need do any funky stuff.你不需要做任何时髦的事情。 Behaviour you want is natural for html, just stop breaking it
您想要的行为对于 html 来说是自然的,停止破坏它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.