定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{height: 30000px}
div{width: 100px;
height: 100px;}
#xiangdui{background: #4caf50;position: relative;top: 100px;left: 100px;}
#juedui{background: chocolate;position: absolute;top: 100px;left: 100px;}
#guding{position: fixed;background: aqua;bottom: 100px;right: 50px}
#nianxing{background: blue;position: sticky;top:100px;}
</style>
</head>
<body>
<div id="xiangdui"></div>

<div id="juedui"></div>

<div id="guding"></div>

 
 
 
 
 
 
 

<div id="nianxing"粘性定位</div>

 
 
 
 
 
 

</body>
</html>

posted @ 2023-06-30 10:34 崔鑫焱阅读(28) 评论(0) 收藏举报

刷新页面返回顶部

定位

公告