fixed和sticky的区别

2024-11-03

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:

table-layout引起的探索——fixed和auto的区别

问题:最近想把mui提供的底部导航组件样式单独抽出来,遇到一个问题:给底部图片下的文字设置了超出隐藏,但没有生效,如下图: 注:该底部导航为mui提供的组件解决:这让我百思不得其解,经过一些琢磨后发现是这个属性的原因:table-layout table-layout 属性的作用是设置表格布局算法,详情:https://www.runoob.com/cssref/pr-tab-table-layout.html 只要把这个属性去掉或者改成 table-layout:auto,超出隐藏就无

fixed和sticky

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>fixed和sticky</title> <style type="text/css"></style> <link rel="stylesheet"href="fixedsticky.css"> <

css-position之fixed vs sticky

css-position之fixed vs sticky fixed(固定定位) 元素相对于浏览器窗口是固定的,即使是窗口滚动,元素也是固定的 sticky(粘性定位) 基于用户滚定动来进行定位的,相当于relative定位 fixed定位的结合体当未超过阈值的时候,他的行为就像relative,当超过特定阈值是他的行为就像fixed. 阈值是left,right,top,bottom(必须制定其一,才能使粘性定位生效,否则其行为与relative相同) sticky事例: 1 <!DOCT

布局fixed和sticky

sticky非常非常非常好用怎么用看代码: 这里为什么没有设置高度呢,因为这个高度应该是浏览器高度,浏览器高度在时刻变化怎么办? js处理: 此JS里面会有执行方法一步一步看这个里面有JS方法这个就是最关键的了,第一次拿到浏览器的高度$(window).height()利用resize(function(){})函数每次变化都赋予新的高度.ok! sticky就想胶水一样粘在你的页面上,不影响布局变化.可参照https://www.flying-lines.com里面的阅读页,大家仔细想想如

fixed和absolute的区别

今天在实际项目中,写首页一屏的时候,发现页脚定位(position:absolute:)没有达到我想要的效果(不管屏幕大小,页脚始终相对浏览器底部定位).于是我觉得有点奇怪,然而我旁边的小哥说:很明显你应该用(position:fixed:),于是连忙整理一下他俩的区别. 1.fixed--固定定位,参照位置是浏览器窗口的左上角. 2.absolute--绝对定位,参照位置是离当前元素最近的定位方式为fixed.absolute.relative的祖先元素的左上角. 代码如下: 效果如下:

position:relative/static/fixed/absolute定位的区别以及使用场景

absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变.absolute的元素不仅位置改变了,同时也脱离了文档流.所以absolute会把非定位盒子覆盖掉. position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子

css属性position: static|relative|absolute|fixed|sticky简单解析

目录 static 静态定位(默认) relative 相对定位正常文档流加了relative之后的布局加上margin/padding/border之后的布局 absolute 绝对定位正常文档流加了absolute之后的布局加上margin/padding/border之后的布局 fixed 固定定位 sticky 粘性定位注意的点此文档对应的例子参考资料 CSS position属性规定一个元素在文档中的定位类型.top,right,bottom和left属性则决定了该元

你不知道的sticky

position:sticky,Chrome新版本已经做了支持.sticky的中文翻译是“粘性的”,position:sticky表现也符合这个粘性的表现.基本上,可以看出是position:relative和position:fixed的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed. 语法: header { position: -webkit-sticky; position: sticky; top:; } 看个类似通讯录滚动的例子: <!D

linux文件权限位SUID,SGID,sticky的设置理解

SUID含义:文件的该位被设置为1,在该文件被执行时,该文件将以所有者的身份运行,也就是说无论谁来执行这个文件,他都有文件所有者的特权,如果所有者是root的话,那么执行人就有超级用户的特权了,这是该位将变成一个安全漏洞,因此不要轻易设置该位. SGID含义:运行者将具有文件所有组的权限. 粘合位: 要求操作系统既是在可执行程序退出后,仍要在内存中保留该程序的映像,这样做是为了节省大型程序的启动时间,但是会占用系统资源,因此设置

CSS 属性 - position讲解

postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: relative4. position: absolute5. position: fixed 依次讲解这5个值的应用. position: static static 为position 属性的默认值,static 元素会遵循正常的文档流,且会忽略 top,bottom,left,right 等属性

理解css之position属性

之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性.当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结.在这里会注明借鉴或引用文章的出处.侵权即删. position属性值包括 static,relative,absolute,fixed,sticky(实验属性)5种. 1.static 该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置.此时设置 top, right, bottom, left 和 z-index 属性

CSS属性之position讲解

postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: static position: inherit position: relative position: absolute position: fixed position: sticky(new) 依次讲解这6个值的应用. position: static static 为position 属性的默认值,static 元素会遵循正常的文档流,且会忽略 top,bottom,le

css笔记 - 张鑫旭css课程笔记之 float 篇

https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮动的包裹与破坏包裹收缩坚挺隔绝 - BFC 具有包裹的其他属性:(是不是可以生成块级上下文的其他属性?) display: inline-block.table-cell... position: absolute(近亲).fixed.sticky overflow: hidden.scro

如何提高scroll事件的性能

1. chrome devtool 是诊断页面滚动性能的有效工具 2. 提升滚动时性能,就是要达到fps高且稳. 3. 具体可以从以下方面着手使用web worker分离无页面渲染无关的逻辑计算触发监听事件时使用函数节流与函数去抖使用requestAnimationFrame与requestIdleCallback代替定时器避免强制重排提升合成层场景滚动行为无时无刻不出现在我们浏览网页的行为中,在许多场景中,我们有有意识地.主动地去使用滚动操作,比如: 懒加载 loadmore a

【前端知识体系-CSS相关】CSS布局知识强化

1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { margin: 0; padding: 0; } .layout { margin-top: 10px; } .layout div{ min-height: 100px; } </style> <body>  <section cl

(33)Vue购物车

computed:{ lists(){ return this.$store.state.list }, }, 用v-model来双向绑定input控制checkbox是否选中 Vue中双向数据绑定是如何实现的 position的取值 static.relative.absolute.fixed.inherit.sticky static标准文档流 relative相对于自身移动 fixed相对于body移动 inherit继承父级的position属性 absolute相对于离它最近的 pos

CSS之垂直水平居中的背后

最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每当需要说更多的时候我都简单阐述后一笔带过,然后附上参考资料.后面若是写css系列的时候再详细讲吧. 其实这道面试题,真的考察很多东西,个人理解它属于开放类型的问题,没有指定范围的答案,所以它就可以涉及到很大范围的知识概念,并且以此判断开发者对技术理解的深度和宽度.那么要解决这个问题,最大的难点在于分

z-index和transform

z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上.事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读.因为阅读完了,你会有所收获的. 堆叠上下文(Stacking Context) 在开始今天的主题之前,先得回忆一下CSS中的Stacking Context(堆叠上下文).因为只有了解清楚了这个概念,才能更好的了解下面的内容. 任何HTML文档默认的堆叠上下文都是<html>元素.因此,除非创建新的堆叠上下文.默认情况下,元素的

css定位之绝对定位

绝对定位可以做很多事情,如广告位,弹出框,遮罩层等一些功能 css的定位方式:1.静态定位, 2.绝对定位(固定定位和绝对定位) ,3.相对定位绝对定位会受到影响的因素有 1.属性的取值. 2.元素偏移量 3.元素偏移参照基准. 绝对定位完全脱离标准文档流未设置偏移量时,都会按照已经定位(absolute,relative)的父级元素的左上角定位当设置了绝对定位那么就会有了z-index的属性 fixed 和absolute的区别 1.absolute,无已定位的祖先元素,以html标签为

fixed和sticky的区别

热门专题