[分享]css两个div交换位置

CSS是一门用来控制HTML元素样式的语言，常用于网页的设计和排版。在实际的网页开发中，经常需要对元素进行位置调整，其中一个常见的需求是交换两个div元素的位置。下面就来介绍一下如何使用CSS实现这一...

CSS是一门用来控制HTML元素样式的语言，常用于网页的设计和排版。在实际的网页开发中，经常需要对元素进行位置调整，其中一个常见的需求是交换两个div元素的位置。下面就来介绍一下如何使用CSS实现这一效果。

/* HTML代码 */
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

/* CSS代码 */
.box1 {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 150px;
  height: 100px;
  background-color: pink;
}

.box2 {
  position: absolute;
  left: 20px;
  top: 140px;
  width: 150px;
  height: 100px;
  background-color: skyblue;
}

@media screen and (min-width: 768px) {
  .box1 {
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
  }

  .box2 {
    left: 50%;
    transform: translateX(-50%);
    top: 140px;
  }
} 

首先，在HTML中创建两个div元素，并为其添加不同的类名。接下来，在CSS中为这两个元素分别添加样式。需要注意的是，这里将.box1和.box2的定位方式都设置为absolute，可以保证它们从文档流中脱离，不会影响其它元素的布局。

接下来，在@media的查询语句中对.box1和.box2进行再次定位。这里使用了transform属性，将元素平移至屏幕的中央，同时设置top值，使它们不会发生重叠。这样，就完成了两个div元素的位置交换。