position属性sticky和fixed的区别比较
position属性之fixed
fixed总是以body为定位时的对象，总是根据浏览器窗口来进行元素的定位，通过left，right，top，bottom属性进行定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{ float: left;
margin-right: 20px;
}
.div1{
background-color: #FF0000;
width: 10000px;
height: 10000px; }
.div2{
background-color: #33FF66;
width: 100px;
height: 100px;
position: fixed;
left: 50px;
top: 50px;
}
</style> </head> <body>
<div class="div1">层1</div>
<div class="div2">层2</div>
</body> </html>
在vscode上运行后
由于px设置够大，网页可以滚动
在拖动滚动条后，如下图
我们可以发现随着滚动条的下滑，层二的位置始终不变。这便是fixed属性。
如果把层二div中 position：fixed；
left：50px；
top：50px； 并且把层1块的height设置得大一些（让页面有滚动的效果）
去掉，那么，层2将不会随着滚动条的下滑而下滑，如下图：
sticky
<!DOCTYPE html>
<html>
<head> <title></title>
<style type="text/css">
.container {
background: #eee;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.sticky-box {
<!-- position: -webkit-sticky;
position: sticky; -->
height: 60px;
margin-bottom: 30px;
background:violet;
<!--top: 0px; -->
} div {
font-size: 30px;
text-align: center;
color: #fff;
line-height: 60px;
}
</style> </head> <body>
<div class="container">
<div class="sticky-box">内容1</div>
<div class="sticky-box">内容2</div>
<div class="sticky-box">内容3</div>
<div class="sticky-box">内容4</div>
</div>
</body> </html>
上图html注释掉 {
position： -webkit-sticky；
position： sticky；
top：0px；
}
运行后，效果如下图：
可以看见效果和fixed是一样的，随着滚动条移动，图形也跟着移动。
但是加上
{
position： -webkit-sticky；
position： sticky；
top：0px；
}
之后再运行，效果如下图：
可以发现，注释过的html运行后，内容板块随着滚动条的下移消失在视口。而没有注释的代码“内容四”即使在滚动条下滑到最后都停留在视口的最上方。这就是fixed和sticky的属性的区别了。
再有，因为设置的是top：0px；
让我们改成top：100；运行后如下图：
可以看见，滚动条即使下移到最下方，内容板块也和视口顶部差100px；
sticky实验总结：
top：0px； 时，属性和fixed相似。
top： px>0时， 属性加成relative。
------------------------------------------------------------------------------------------------------------完美分割线----------------------------------------------------------------------------------------------------------------
position：sticky；的生效规则：
1、必须指定top、right、bottom、left四个阈值的其中之一（比如本次sticky使用了top），才可使粘性定位生效。
2、到达设定的阈值。
比如本次sticky的阈值为top：0px；
top：0px；时sticky体现fixed的属性。
top>0px 时 sticky还要加成relative的属性。
------------------------------------------------------------------------------------又一完美分割线------------------------------------------------------------------------------------------
sticky和fixed的区别是：
sticky可以有fixed的滚动的效果，而fixed没有sticky的粘性的效果（可以不随滚动而消失在视口）。
position属性sticky和fixed的区别比较的更多相关文章
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
- position的sticky与fixed
fixed(固定定位) 生成绝对定位的元素,相对于浏览器窗口进行定位.元素的位置通过 "left", "top", "right" 以及 & ...
- 细谈position属性:static、fixed、relative与absolute
学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...
- ----关于posotion的sticky与fixed的区别----
sticky 出现在正常流当中,不能设置定位,随页面滚动 (sticky = relative + fixed) fixed 不出现在正常流当中,能设置定位,随页面滚动 eg: html: <p ...
- position属性absolute与relative 的区别
连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...
- css的position中absolute和fixed的区别
fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- css的float和position属性
(1)float的简单用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- Mysql 层级、执行顺序、执行计划分析
逻辑分层 下面是MySQL的逻辑分层图: 连接层:连接与线程处理,这一层并不是MySQL独有,一般的基于C/S架构的都有类似组件,比如连接处理.授权认证.安全等. 服务层:包括缓存查询.解析器.优化器 ...
- JAVA_Sprint学习（一）
保存用户信息的编程思维 传统的思想,就是建立一个类之后,然后将用户的姓名和密码,以及添加用户等操作都放在一个main中, 按照抽象编程的思想而言, 首先建立一个类User,用来是表示用户的具体信息Us ...
- nginx unit PHP
2018-12-26 14:20:33 星期三 综述: nginx unit php 的关系: nginx -> 转发请求到 8300端口 -> unit 转发 8300 收到的请求 -& ...
- 初识中间件Kafka
初识中间件Kafka Author:SimplelWu 什么是消息中间件? 非底层操作系统软件,非业务应用软件,不是直接给最终用户使用的,不能直接给客户带来价值的软件统称为中间件 关注于数据的发送和接 ...
- 【python】使用flask制作小型页面的关键点总结
目录结构 app.py web代码 store.db 存储信息的轻量数据库,用的sqlite3 schema.sql 数据库的初始化建表语句 settings.cfg 配置信息 static/styl ...
- Java 批量修改文件夹里面的文件的名字
背景:公司要求使用PADS完成原理图设计.PCB Layout.而他硬件工程师要求我在将PADS的库文件发送给他们之前,必须在每一个库文件的后面追加今天的日期,再发送给他们. 问题来了,如果一次需要发 ...
- FreeRTOS 启动进程调度后，程序卡死的部分原因分析。
现象:1,RTOS 使用时 系统卡启动文件 B .处. 原因分析:该种情况是由于定义开启了中断,但是未开启中断处理服务.程序执行到中断响应式无对应的程序响应 ...
- Python3学习笔记十三
1. css 老师的博客:http://www.cnblogs.com/yuanchenqi/articles/6856399.html 选择器:找到想要改变的标签 css的功能:渲染和布局 2. ...
- leetcode python两数之和返回索引
给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], target ...
- 深入理解css优先级
为什么要写这篇文章是因为 <style type="text/css"> body h1 { color: green; } html h1 { color: purp ...