[分享]css两个div位置动态相关

CSS中有一个常见的问题就是如何实现两个div的位置动态相关。这种需求经常出现在响应式设计中，通过CSS的媒体查询来处理不同屏幕尺寸下的布局变化。代码实现的方式也比较简单，下面我们来看一下实现的方法。...

CSS中有一个常见的问题就是如何实现两个div的位置动态相关。这种需求经常出现在响应式设计中，通过CSS的媒体查询来处理不同屏幕尺寸下的布局变化。代码实现的方式也比较简单，下面我们来看一下实现的方法。

.wrapper {
  position: relative; /*这里我们先给外层容器一个相对定位*/
}

.box1 {
  position: absolute; /*利用绝对定位来实现位置动态相关*/
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}

.box2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

以上代码中，我们在外层容器中加了`position: relative;`来给内层box1和box2提供相对定位的参照物。然后，通过给box1和box2设置`position: absolute;`来实现绝对定位，并通过`top`、`left`、`right`等属性来控制位置。当外层容器的宽度变化时，box1和box2的位置就会动态地变化。

下面，我们再来看一下如何利用CSS媒体查询来实现响应式布局。

@media screen and (max-width: 768px) {
  .box1, .box2 {
    position: static; /*当屏幕尺寸小于768px时，让box1和box2变成静态定位*/
    width: 100%;
    height: auto;
  }
}

以上代码是在`max-width: 768px`的条件下实现的，当屏幕尺寸小于等于768px时，我们把box1和box2的位置变为静态定位，同时设置宽度为100%来适应小屏幕，height属性设置为auto以自适应高度，从而实现响应式布局。

以上就是CSS实现两个div位置动态相关的方法，希望对大家有所帮助。