position:sticky

概念

　　翻译过来即使粘性定位。

　　是相对定位与固定定位的混合。

　　当元素A在屏幕内，表现会relative，当即将滚出屏幕外，达到我们设定的值（比如top:10px)时，表现为 fixed。

　　当同等级的元素B达到设定的值时，会把A元素挤出屏幕，B占据A的位置。

语法知识

　　position:stricky;

　　top/bottom/left/right:10px;

　　必须指定 top/bottom/left/right 中的一个，效果才会生效，否则与 position: relative 效果一致。

Demo

 1   <style type="text/css">
 2         #testDiv2 {
 3             width: 200px;
 4             height: 200px;
 5             border:1px solid #A7BFE8;
 6             overflow: scroll;
 7             margin: 1em auto;
 8         }
 9 
10        
11         .header{
12             position: sticky;
13             background-color: #333;
14             color: #fff;
15             top: 0;
16             z-index: 1;
17         }
18 
19         .content{
20             background-color: #ffffe0;
21 
22         }
23         .footer {
24             position: sticky;
25             background-color: #cd0000;
26             color: #fff;
27             margin:10px;
28             bottom: 15px;
29             z-index: -1;
30         }
31     </style>
32     <div id="testDiv2">
33         <div class="section">
34             <div class="header">A</div>
35             <div class="content">
36                 <div>A-1</div>
37                 <div>A-1</div>
38                 <div>A-1</div>
39                 <div>A-1</div>
40                 <div>A-1</div>
41                 <div>A-1</div>
42                 <div>A-1</div>
43                 <div>A-1</div>
44             </div>
45             <div class="footer">Afooter</div>
46         </div>
47         <div class="section">
48             <div class="header">B</div>
49             <div class="content">
50                 <div>B-1</div>
51                 <div>B-1</div>
52                 <div>B-1</div>
53             </div>
54             <div class="footer">Bfooter</div>
55         </div>
56         <div class="section">
57             <div class="header">C</div>
58             <div class="content">
59                 <div>C-1</div>
60                 <div>C-1</div>
61                 <div>C-1</div>
62             </div>
63             <div class="footer">Cfooter</div>
64         </div>
65 
66         <div class="section">
67             <div class="header">D</div>
68             <div class="content">
69                 <div>D-1</div>
70                 <div>D-1</div>
71                 <div>D1</div>
72             </div>
73             <div class="footer">Dfooter</div>
74         </div>
75     </div>

　　在使用position:stricky时，展现效果首先于设置stricky元素的父元素（这里是 class="section"元素）。

　　这里class='header'元素设置了top值，此元素会先滚动，然后固定，它的兄弟元素则会继续滚动。

　　　　class='footer'元素设置了bottom值，此元素向下滚动时，会固定，后面的兄弟元素继续滚动；由于z-index=-1，因此，会被兄弟元素覆盖，形成隐藏效果。

　　在使用此属性时，HTML结构很重要。

posted on 2019-02-27 13:45 Herry彬阅读(183) 评论(0) 收藏举报