[分享]css中2层div相对静止

CSS中有一种常见的情形，就是2层div相对静止。这种效果是指在页面上嵌套两个div，其中内部的div相对于外部的div不随页面的滚动而移动，而是保持固定的位置不变。下面我们来看看如何实现这种效果。 ...

CSS中有一种常见的情形，就是2层div相对静止。这种效果是指在页面上嵌套两个div，其中内部的div相对于外部的div不随页面的滚动而移动，而是保持固定的位置不变。下面我们来看看如何实现这种效果。

<div class="outer">
  <div class="inner">
    // 内部div的内容
  </div>
</div> 

代码中，我们创建了一个“outer”和“inner”类的div，并将内部div嵌套在外部div中。接下来，我们需要对这两个div进行样式设置。

.outer {
  position:relative;
  width:100%;
  height:100%;
}

.inner {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
} 

首先，我们将外层div的position属性设置为relative，是为了建立相对定位的父元素，而内层div则通过使用绝对定位来实现相对静止。top和left属性都设置为50%，使内部div水平和垂直居中。最后，我们使用transform属性来沿着x轴和y轴平移它的50%宽度和50%高度，以确保它仍完全可见。

此时，内部div就会相对静止在外部div上，即使页面滚动也不会移动。这种技术在创建固定的表头或其他基于窗口大小的导航元素时非常有用。