<!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>粘性定位</title>
<style>
/*
一、定位：将盒子指定到页面的中的任意位置。
1.position 属性可以开启元素的定位
可选值：
static 没有开启定位（默认值）
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘性定位
2.开启定位后通过 top right bottom left 四个属性设置元素的位置
二、粘性定位(兼容性不好，IE不支持)
1.可以理解为相对定位和固定定位的结合
2.粘性定位不会脱离文档流
3.粘性定位参照浏览器可视窗口进行定位
4.粘性定位可以在元素到达某个位置时将其固定
*/
body{
height: 3000px;
}
.box1{
width: 1000px;
height: 80px;
background-color: #c7edcc;
margin: 100px auto 0px;
/*开启粘性定位*/
position: sticky;
/*移动元素位置*/
top:10px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)