标签：z-index 属性 index tab stat init body 项目结构 highlight
在目标区域以内，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> </head> <body> <p>尝试滚动页面。</p> <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p> <div class="sticky">我是粘性定位!</div> <div style="padding-bottom:2000px"> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p> </div> </body> </html>
根据特性实现表格的冻结列效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <style> body{ margin:0px; } table{border-collapse: collapse;} th,td{padding: 5px;text-align: center;border:2px solid #999;min-width: 100px;} th{background-color: #333;color:#fff;position: sticky;top:-1px;z-index: 2;} td:first-child{background-color: #333;color: #fff;position: sticky;left:0px; border:2px solid #999;} td:nth-child(2){background-color: #333;color: #fff;position: sticky;left:111px;border:2px solid #999;} </style> <script src="https://cdn.staticfile.org/vue/2.5.17-beta.0/vue.min.js"></script> <script> document.addEventListener("DOMContentLoaded",function(){ let t = new Vue({el:"#t"}); }); </script> </head> <body> <table id="t"> <thead> <tr> <th v-for="(n,i) of 50">字段 {{i+1}}</th> </tr> </thead> <tbody> <tr v-for="(n,i) of 100"> <td v-for="(m,j) of 50">{{j+1}}</td> </tr> </tbody> </table> </body> </html>
html结构
<div class="service-wrap"> <tab>这是tab切换</tab> <div class="list-container"> <!--for循环有很多item--> <item></item> <item></item> </div> </div>
标签：z-index 属性 index tab stat init body 项目结构 highlight
原文地址：https://www.cnblogs.com/jscai/p/13680187.html
