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=& ...
随机推荐
- selenium采用find_element_by方法识别页面元素
主要是练习获取页面中的各元素,马克 # coding:utf-8 import time from selenium import webdriver import unittest from pyt ...
- 【easy】235. Lowest Common Ancestor of a Binary Search Tree
题意大概是,找两个节点的最低公共祖先 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNod ...
- 爬虫 selenium+Xpath 爬取动态js页面元素内容
介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作,比如 ...
- vue环境下新建项目
1.之前电脑上安装了node和npm,查看下版本信息. 2.现在安装vue-cli脚手架,可以全局安装: npm install --global vue-cli 之前自己电脑没有安装过webpac ...
- UiAutomator2.0 - Toast信息的验证
目录 问题:在做UI自动化测试时,偶尔会碰到 Toast 这种提示信息(如图),通过Uiautomatorviewer 无法获该类控件的信息.所以无法验证,该条case不能实现.然后就没然后了... ...
- 第一个 Python 程序
## 目标 * 第一个 `HelloPython` 程序* `Python 2.x` 与 `3.x` 版本简介* 执行 `Python` 程序的三种方式 * 解释器 —— `python` / ` ...
- layer.open()利用代码实现伪阻塞
今天在项目中遇到需要弹框处理的问题,,当用户点击某个单选框时,需要进行确认操作,,常规的情况下,因为layer.open()和layer.confirm()都是异步执行的, 在点击单选框之后单选框会立 ...
- 学习笔记_J2EE_SpringMVC_01_入门
1. 概述 笔者作为一个不太正经的不专业佛教信仰者,习惯了解事物的因果关系,所以概述就有点BBB...了.如果不喜欢这些的,请自行跳过概述章节,直接进入第二章的操作实践:2 入门示例. 1.1. ...
- 在Windows Server2016中安装SQL Server2016
SQL Server2016安装硬.软件条件:点击打开链接 WinServer2016的安装参见: 在虚拟机中安装Windows Server2016 1. SQL Server2016下载地址: - ...
- 看了这一张GIF图你就明白什么回事了，必看的经典！--快速构建一个请假流程
下面介绍一下FSBPM构建一个请假单流程 1.数据模型的构建 输入业务中需要的数据项即可,比如[申请人,开始时间,结束时间,请假天数,请假理由,附件上传..........] 2.自定义流程 审批节点 ...