[分享]css不随页面滚动条滚动

在网页设计中，有时我们会希望某些元素的位置固定不变，不随页面滚动条的滚动而改变。这时我们可以使用CSS来实现这一目的。要让一个元素不随页面滚动而滚动，我们可以使用CSS的属性来设定其位置属性。有三种基...

在网页设计中，有时我们会希望某些元素的位置固定不变，不随页面滚动条的滚动而改变。这时我们可以使用CSS来实现这一目的。

要让一个元素不随页面滚动而滚动，我们可以使用CSS的position属性来设定其位置属性。有三种基本的position属性：

position:static（默认值）
position:relative
position:absolute 

其中，static是所有元素的默认值，表示元素在文档流中按照其出现顺序静态放置，不做任何定位。而relative和absolute则是定位属性。相对定位relative是相对于元素自身在文档流中的位置进行定位，而绝对定位absolute则是相对于最近的父元素进行定位。

我们可以使用absolute属性，再结合top和left属性来设定元素的位置。例如：

.box {
  position: absolute;
  top: 100px;
  left: 50%;
} 

这段代码将元素.box的position属性设为absolute，表示绝对定位；top设为100px，表示距离父元素顶部100像素；left设为50%，表示横向中心对齐。

这样，即使页面滚动条滚动，元素.box的位置也不会改变，依然固定在页面的指定位置。