css 列表第一个li不动

在编写CSS的时候，我们经常会遇到一个需求，那就是想让一个ul中的第一个li保持不动，其他的li则可以根据用户的滚动而移动。如何实现这个需求呢？下面，我们就来介绍一种方法：

    ul class="list">
            li class="fixed">
    第一个li/li>
            li>
    第二个li/li>
            li>
    第三个li/li>
            li>
    第四个li/li>
            li>
    第五个li/li>
            li>
    第六个li/li>
            li>
    第七个li/li>
        /ul>

首先，在HTML中我们先给第一个li加上一个class，比如说我们这里加上了一个叫“fixed”的class。接下来，我们在CSS中通过给ul和li分别设置position属性，并设置第一个li的position属性为fixed来实现第一个li的不动：

    .list {
            position: relative;
            overflow: scroll;
    }
    .fixed {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background-color: #fff;
    }
    .list li {
            position: relative;
            z-index: 2;
    }
    

在上述代码中，我们先给ul设置了position属性为relative，并设置了overflow属性为scroll，这样就能让用户在滚动时出现滚动条。接下来，我们给第一个li设置了position属性为absolute、top和left属性为0，这样就能让它的位置固定在ul的左上角不动了。由于第一个li已经不再占用空间，因此建议在它后面再加一个空白的li元素来占据它原来的位置。最后，我们再给其他的li设置position属性为relative并设置z-index属性使它们“浮”在第一个li之上就可以了。

总之，想让一个ul中的第一个li保持不动，其他的li则可以根据用户的滚动而移动，只需要给第一个li设置position属性为fixed即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！