欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

position：sticky

程序员文章站 2022-04-25 11:38:03
...

position：sticky；
子元素的作用区间依赖父元素；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
	    *{
	    margin:0;
	    padding:0;
	    }
	    header{
			    height:88px;
			    background: orange;
	    }
	    nav{
			    height:388px;
			    background:#000;
			    /* position:sticky;
			    top:0; */
	    }
	   div{
           width: 30px;
           height: 30px;
           float: right;
           background-color: greenyellow;
            position:sticky;
			    top:210px; 
       }
	    figure{
			    height:35px;
			    width:23px;
			    float:right;
			    background:#ff0;
			    position:sticky;
			    top:210px;
	    }
	    section{
			    height:1900px;
			    background:pink;
	    }
	    </style>
</head>
    <body>
	    <header></header>
	    <nav>
		  
        </nav>
        <div></div>
	    <section></section>
    </body>
</html>
相关标签： position 定位

上一篇： Position布局模型-float浮动模型

下一篇： CSS position属性

推荐阅读