如何在html中切换两个div

Question

假设我有两个相互重叠的div。我想交换两个div。无需对代码进行任何更改。如何交换两个div？

Answer 1

您可以使用Z-index来解决此问题

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>The z-index Property</h1>

<img src="w3css.gif" width="100" height="140">

<p>Because the image has a z-index of -1, it will be placed behind the heading.</p>

</body>
</html>

Answer 2

您可以使用flexbox排序来完成此任务。

来自MDN：

订单CSS属性设置在flex或grid容器中布置项目的顺序。容器中的项目按升序值排序，然后按源代码顺序排序。

看看这个演示。在“整页”模式下打开它，并将屏幕大小调整为小于400px，以便框开始重叠。使用排序，我交换或切换divs而不需要任何JavaScript。

html, body {
  margin: 0;
}

.container {
  display: flex;
  width: 500px;
  max-width: 100%;
  border: 1px solid red;
  justify-content: space-between;
}

.container > * {
  position: relative;
  width: 200px;
  height: 100px;
}

.container > *::after {
  position: absolute;
  bottom: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  color: black;  
}

.left {
  background-color: green;  
}

.left::after {
  content: 'left';
}

.right {
  background-color: blue;
}

.right::after {
  content: 'right';
}


@media screen and (max-width: 400px) {
  .left {
    order: 1;    
  }
  
  .left::after {
    content: 'right';
  }
  
  .right::after {
    content: 'left';
  }
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

jsFiddle

Answer 3

你想交换div的可见性吗？使用z-index，您可以将1 div放在另一个之上。

.red, .blue {
  width: 200px;
  height: 100px;
  position: absolute;
}
.red {
  background: red;
  z-index: 1;
}
.blue {
  background: blue;
  top: 50px;
}

<div class="red"></div>
<div class="blue"></div>

如何在html中切换两个div

问题描述投票：-5回答：3

3个回答

最新问题

如何在html中切换两个div

问题描述 投票：-5回答：3

3个回答

最新问题

问题描述投票：-5回答：3