css之sticky定位

1.属性介绍:

sticky定位(粘性定位),指的是基于用户的滚动位置来定位,默认情况下它表现就和relative定位一样,但是当页面滚动区域大于你的目标区域(即sticky对应的元素区域)时,它的表现和fixed定位一样。
元素定位也同样需要根据所设定的top,left,right,bottom来呈现。

2.sticky定位的缺点:

存在兼容性问题
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要添加-webkit前缀。

3.案例:

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>stickytitle>
   <style>
        .userList-title{
            padding: 10px;
            background-color: greenyellow;
            position: -webkit-sticky;
            position: sticky;
            top:0;
        }
        .user-list-item{
            padding: 10px;
            background: pink;
        }
        .user-list-item:nth-child(odd){
            background-color: coral;
        }
        .phone{
            margin-top: 10px;
        }
    style>
head>
<body>
    <div class="userList-title">用户列表div>
    <div class="user-list-item">
        <div class="username">张三div>
        <div class="phone">18989898989div>
    div>
    .....此处省略n个列表项
    <div class="user-list-item">
        <div class="username">张三div>
        <div class="phone">18989898989div>
    div>
    
body>
html>

css之sticky定位_第1张图片
css之sticky定位_第2张图片

你可能感兴趣的:(CSS,css,前端)