0、效果:
1、HTML代码:为了简洁采用内部样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height:3000px;}/* 粘性定位的前提是有滚动条 */div p{width: 100%;height:50px;margin: 0;/* 首先是相对定位,top是0,left是0,到达临界值,就是绝对定位,top是0,left是0 */position: sticky;top:0; left:0;}</style>
</head>
<body><div><p>这是第一句诗</p><br> <!-- p是行类元素,通过br转化为块元素 --><p>这是第二句诗</p><br><p>这是第三句诗</p><br><p>这是第四句诗</p><br></div></body>
</html>