CSS position:sticky与position:fixed区别

食在广东 2019-11-18 458 阅读

position:sticky粘性定位与position:fixed固定定位效果比较类似。
都可以在拖动滚动条的时候,将元素固定于指定位置,但是两者的区别也是非常巨大的。
一.固定定位:
(1).元素可以被固定于页面指定位置,始终固定于此位置。
(2).定位位置可以通过top、bottom、left与right属性设置。
(3).如果属性同时设置,那么top的优先级高于bottom,left的优先级高于right。
(4).top、bottom、left与right无需显式设置,fixed定位也会生效。
(5).元素的定位参考对象是当前视口包含块,不要误以为是距离其最近的定位元素。
(6).元素脱离文档流。
(7).当前所有主流浏览器都支持此定位方式(不再考虑IE6浏览器)
二.粘性定位:
(1).元素可以被固定于页面指定位置,但并不一定始终固定于此位置。
(2).定位位置可以通过top、bottom、left与right属性设置,但是此位置是一个临界值,也就是说元素只有达到设置的这个临界值才会固定,其他位置并不会固定。
(3).如果属性同时设置,那么top的优先级高于bottom,left的优先级高于right。
(4).必须至少显式设置top、bottom、left与right其中某一个属性值,sticky定位才会生效。
(5).元素的定位参考对象距离其最近的overflow属性值为visible的具有滚动条的祖先元素,如果是以body或者body的父辈元素为考,那么定位参考对象是视口包含块。
(6).元素不会脱离文档流。
(7).浏览器兼行当前有点差,不过以后肯定会越来越好。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>CSS position:sticky与position:fixed区别</title>
<style type="text/css">
div {
font-size: 30px;
text-align: center;
color: #fff;
}
.container {
background: #eee;
width: 400px;
height: 1000px;
margin: 120px auto;
}
.sticky ,.fixed{
height: 60px;
line-height: 60px;
margin-bottom: 30px;
top:50px;
}
.sticky{
position: sticky;
background: green;
}
.fixed{
position: fixed;
background:blue;
}
</style>
</head>
<body>
<div class="container">
<div class="sticky">乐分享</div>
<div class="fixed">乐分享</div>
</div>
</body>
</html>

可以拖动滚动条测试效果,代码分析如下:
(1).fixed元素始终固定于top属性指定的位置。
(2).sticky元素则是到达top属性指定的位置才会固定。
(3).上述两个代码的定位都是以当前视口包含块为参考。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>乐分享</title>
<style type="text/css">
div {
font-size: 30px;
text-align: center;
color: #fff;
}
#box{
width:500px;
height:500px;
overflow:auto;
margin:100px;
}
.container {
background: #eee;
width: 400px;
height: 1000px;
margin: 120px auto;
}
.sticky{
height: 60px;
line-height: 60px;
position:sticky;
background-color:green;
margin-bottom: 30px;
top:50px;
}
</style>
</head>
<body>
<div id="box">
<div class="container">
<div class="sticky">乐分享</div>
</div>
</div>
</body>
</html>

sticky元素的定位参考对象不但可以是视口包含块,也可以是距离其最近的overflow属性值visible的最近父元素。
但是fixed元素始终以视口包含块为定位参考对象,不要认为是以距离其最近的定位元素或者视口包含块为参考。

最新游戏