最近在学习一个比较常用的效果——CSS吸顶。吸顶的意思就是滚动页面时，让一个元素固定在页面顶部，直到页面滚动到该元素顶端时，它才随着页面继续向下滚动。在实现这个效果时，可能会遇到一个问题——该元素的父元素是一个div，当元素被固定在页面顶端时，它会被div遮挡住。接下来，我将介绍一下如何解决这个问题。

首先，我们看一下普通的CSS吸顶效果是怎么实现的。我们需要使用position:fixed属性将该元素固定在页面顶部。在滚动页面时，通过JavaScript判断当前是否滚动到该元素顶端，并在必要的时候改变该元素的位置，让它跟随页面的滚动而移动。下面是一个简单的例子：

.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}

这段代码将一个固定的导航栏置于页面的顶端。但是，如果该导航栏元素是被一个div所包裹的话，当它被固定在页面顶端时，它会被该div所遮挡，造成不能正常显示。这时，我们需要使用另一种方式来实现吸顶效果。

我们可以先将该div设置成position:relative，然后再将导航栏元素设置为position:fixed。接下来，我们需要将导航栏元素的z-index属性设置为比该div的z-index更大。这样，导航栏元素就会浮动在div之上，不受其遮挡。

.container {
position: relative;
z-index: 1;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}

通过将div设置为position:relative并将z-index设置为1，我们为其创建了一层堆叠上下文。然后，我们将导航栏元素设置为position:fixed，并将z-index设置为2，使其在页面上浮动，并且可以覆盖div下面的内容。

总结来说，CSS吸顶是一种简单的实现方式，但在父元素是div时，它需要设置更多的代码才能正常工作。通过将div设置为position:relative并将z-index设置为1，并将导航栏元素设置为position:fixed并将z-index设置为2，我们就可以解决这个问题。