固定定位：
- 将元素的position的属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位是一样的
唯一的不同点就是不同的固定定位永远参照与浏览器的是口进行定位
粘滞定位：
- 当元素的position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致。
不同的是粘滞定位可以在元素到达某个位置时将其固定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fixed&sticky</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
/*
固定定位(fixed)：
- 将元素的position的属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位是一样的
唯一的不同点就是不同的固定定位永远参照与浏览器的是口进行定位
粘滞定位(sticky)：
- 当元素的position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致。
不同的是粘滞定位可以在元素到达某个位置时将其固定。
*/
body{
background-color: #777777;
height: 2000px;
}
.box{
height: 448px;
background-color: #bac;
position :relative;
}
.box1{
width: 1230px;
height: 48px;
background-color: #e8e7e3;
margin: 200px auto;
/* position:sticky; */
position :fixed;
right: 0;
left: 0;
/* top: 0px; */
}
.box1 li{
float: left;
/* height: 100%; */
line-height: 48px;
/* background-color: red; */
}
.box1 li a{
display: block;
height: 100%;
padding:0 44px;
text-decoration: none;
color: #777777;
font-size: 19px;
}
.box1 li a:hover{
color: #e8e7e3;
background-color: #3f3f3f;
}
.box1 li:first-child a{
padding:0 44px 0 44px;
}
</style>
</head>
<body>
<div class="box">
<ul class="box1">
<li><a href="https://www.baidu.com">html/css</a></li><li><a href="https://www.baidu.com">browserside</a></li><li><a href="https://www.baidu.com">xml</a></li> <li><a href="https://www.baidu.com">refrence</a></li> <li><a href="https://www.baidu.com">webbuilding</a></li><li><a href="https://www.baidu.com">programming</a></li><li><a href="https://www.baidu.com">serverside</a></li>
</ul>
</div>
</body>
</html>
网友评论