admin管理员组文章数量:1794759
Css 粘性布局
Css中position属性（sticky）详细参见菜鸟教程:
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，也就是说在position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>粘性布局</title> <style> .container{ width: 1400px; margin: 0 auto; padding-top: 200px; display: flex; } .left{ position: sticky; top: 0; padding: 5px; border: 2px solid #4CAF50; background-color: aqua; width: 200px; height: 800px; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); position: sticky; } .right{ background-color: skyblue; width: 1000px; height: 3000px; margin-left: 50px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); } .right p{ padding: 0 10px; height: 200px; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> </div> </div> </body> </html> 结果：滚动前：
向下滚动滑轮：
版权声明：本文标题：Css 粘性布局 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971821a123973.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论