position sticky 用法
Posted 佑之以航
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了position sticky 用法相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 100%;
height: 100%;
}
ul>li{
height: 400px;
width: 100%;
list-style: none;
top: 0px;
font-size: 32px;
color: #fff;
background: green;
text-align: center;
line-height: 400px;
}
/*固定所有元素*/
/*ul>li{
height: 400px;
width: 100%;
list-style: none;
top: 0px;
font-size: 32px;
color: #fff;
background: green;
text-align: center;
line-height: 400px;
position: sticky;
}*/
/*
* position: sticky
* 一：可用于固定导航栏或者其余需要固定的元素（只需在该元素上设置该属性）
* 二：也可以用于叠加显示（ 每后一级滑动遮挡前一级，需要每一级元素都要设置该属性）
*
* */
</style>
</head>
<body>
<!--固定单一元素-->
<ul>
<li style="position: sticky;">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<!--固定所有元素-->
<!--<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>-->
</body>
</html>以上是关于position sticky 用法的主要内容，如果未能解决你的问题，请参考以下文章