活用CSS（一）移动遮盖效果的实现

背景

今天在学习相关知识的时候，浏览到一个网站，看到一个不错的页面效果。如下：

当我向下滑动时：

你可以直接点击这个网站查看。

node-gyp rebuild 卡住的解决方案

我觉得这种网页效果挺炫酷的。想了好久没有想到比较恰当的命名。我就姑且叫做：移动遮盖效果了。

下面我使用简单的使用CSS的方式实现一下这个很不错的功能。

HTML

我们先把基本的元素构建好。

这样基本元素分为上部分和下部分。上部分是被遮盖的部分，叫做push，下部分是内容部分，成为content。

Fixed

要实现遮盖效果。我们首先能想到的是push部分应该是静止不动的。实现静止不动的方式是让元素脱离文档流，相对于视图定位，也就是posotion: fixed。

实现如下：

实现方式（一）添加透明间隔

第一种实现方式，也是原网站的实现方式，就是在content之上添加透明间隔。

下一步的任务就是把content的内容至于push之上了，我们能想到的是增加z-index的值，这样理应能够实现遮盖效果。如下：

但是我们发现效果不是预期那样。push和content之间的上下层次在呈现上并没有变化。

分析一下CSS代码就会发现，其实原因是由于push是脱离文档流的，而content是在文档流之中的，因此他们两者无法再z-index上形成层次关系。

于是，解决办法就是，让content也相对定位，使用position: relative。如下：

于是我们惊奇地发现，移动遮盖的效果已经实现了。

实现方式（二）margin-top

其实有一种更简单的实现方式，就是添加margin-top。这样就不需要添加透明间隔了，十分简单。

这样，利用margin-top就非常简单方便地实现了移动遮盖效果了。