前段知识点补充

定位知识点补充

  设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响,该在哪里就是哪里(设置是top、left等属性无效)。但是,当该元素的位置将要移出屏幕范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

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

  1. 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
  2. 元素固定的相对偏移是相对于它的父标签而言的。即,设置的 left, top 等的值,是相对父标签而言的。它只会在父标签的范围内sticky(粘性的)

      比较蛋疼的是这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。

作者:stones4zd
来源:CSDN
原文:https://blog.csdn.net/weixin_42703239/article/details/83116206

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,026评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,561评论 0 5
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 3,067评论 0 7
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,584评论 1 45
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,700评论 0 6

友情链接更多精彩内容