css中如何移动div位置不变

CSS中如何移动div位置不变？这个技巧非常实用，可以使得网页布局更加灵活。具体的做法是修改CSS样式，使用绝对定位（position: absolute）和margin负值的组合，来移动div位置。具体的方法如下：

/* 先定义div样式，在这里以class=box为例 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute; /* 绝对定位 */
  top: 50%; /* 距离顶部50% */
  left: 50%; /* 距离左侧50% */
  margin-top: -50px; /* 向上移动50px */
  margin-left: -50px; /* 向左移动50px */
} 

以上代码中，我们给div样式添加了position: absolute属性，这样该元素就脱离了正常文本流，可以根据设置的top、left属性来决定其位置。接着，我们设置距离顶部和左侧都是50%。这个时候，div的位置距离页面左上角是以盒子的中心为准的。

但是，这个时候还不够，因为div元素的宽高并不是通过设置top和left来控制的，而是通过width和height属性来设置的。因此，我们需要将宽高的中心与div元素的中心重合。这个时候，我们可以将margin-top和margin-left属性分别设为宽高的一半的负值，即-50px，这样div元素的位置就完美地移动到了我们想要的位置。

需要注意的是，使用这种方法需要谨慎，因为如果页面中的其他元素位置改变了，可能会影响到这里设置的距离。因此，我们建议将这种方法仅用于一些特殊场合，以达到更好的效果。