sixth week：third work

sticky：设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

　　可以知道sticky属性有以下几个特点：

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

sticky与fixed的区别：在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

何时使用sticky?

用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以我们可能注意到很多网站开始在滚动的时候让一部分内容保持可见，比如，侧边栏的部分区域。position:sticky为此而生。

何时使用fixed？

当需要使一个层相对于浏览器来自动调整该层的位置的时候，如果使用position的absolute属性来定位该层，会发现absolute属性并不能达到想要的css效果，。这时，就需要要用到fixed属性来定位该层。

转载于:https://www.cnblogs.com/l69-l54/p/9780932.html

sixth week：third work相关推荐

c语言数字用英文表达方式,英语口语：如何表达数字
英语口语:如何表达数字 6.分数 Read the top number as a cardinal number, followed by the ordinal number + 's' 先读出分 ...
mysql的增_MySQL之增_insert-replace
MySQL增删改查之增insert.replace 一.INSERT语句带有values子句的insert语句,用于数据的增加语法: INSERT [INTO] tbl_name[(col_nam ...
足球/篮球专业术语(Football and Basketball terms)
FootBall 足球: football, soccer 足球场: field, pitch 中场: midfield 中圈: kickoff circle,center circle 中线: ha ...
NBA English
[size=large][size=small]NBA 各种投篮方式 (slam) dunk:(强力)灌篮 bank shot:擦板球 double pump:拉杆式投篮(verb) fade-awa ...
看NBA必备的篮球词汇大全
球队一览: Eastern Conference 东部联盟 Boston Celtics 波士顿凯尔特人 New Jersey Nets 新泽西网 New York Knicks 纽约尼克斯 Phil ...
NBA 词汇中英对照
(slam) dunk:(强力)灌篮 bank shot:擦板球 double pump:拉杆式投篮(verb) fade-away shot:后仰式跳投 hook shot:钩射投篮 jump sh ...
NBA篮球英语词汇英汉对照
引言: 看看会几个.文章来自网上,我对部分译文进行了修正. 整理:wallimn 博客:http://blog.csdn.net/wallimn 时间:2008-12-22 NBA 各种投篮方式 (s ...
mysql之DML语句
DML语句 1.dml语句什么是dml语句:DML:DATA MANIPULATION LANGUAGE(数据操纵语言),由INSERT.UPDATE.DELETE等语句构成,用来修改表中的数据.( ...
大数据技术之_19_Spark学习_07_Spark 性能调优 + 数据倾斜调优 + 运行资源调优 + 程序开发调优 + Shuffle 调优 + GC 调优 + Spark 企业应用案例
大数据技术之_19_Spark学习_07 第1章 Spark 性能优化 1.1 调优基本原则 1.1.1 基本概念和原则 1.1.2 性能监控方式 1.1.3 调优要点 1.2 数据倾斜优化 1.2. ...

sixth week：third work

sixth week：third work相关推荐

最新文章

热门文章