关键词：

众所周时"position: sticky;"是粘性布局，相当于sticky与fixed的组合。但他的细节和妙用，未必人人皆知。所以记录下我这一周的学习总结，供大家参考使用。

回顾 position values

position中目前有五个值分别是static、relative、absolute、fixed、sticky。使用场景分别如下：

• static: 此值为默认值，元素仍然隶属于文档流，此时不受left、z-index等属性控制。
• relative: 此值配和left等属性可以改变元素在页面中的位置，但不会影响其他元素，因为原位置仍会空白保留。
• absolute: 此值与前两个有本质上的区别，因为他会讲元素移除文档流。因此，后边的元素会占据改元素的位置。此外，被移除的元素所依旧的定位位置来自于第一个非static值的祖先级元素。
• fixed: 此值也会被移除文档流，但是根据定位的元素时窗口。所以打印时候，会出现在每一页上面。
• sticky: 此值较为复杂，大家可以先理解为sticky + fiexd的组合，接下来我们着重分析它。

聚焦 sticky

为什么要单独拿出来sticky来讲,因为它确实是position values中最抽象、隐晦的。这也造成学习成本加大，使用频率变低。要想说明白他是如何生效的？那就需要知道下面这三个要素。

1. nearest scrolling ancestor。sticky元素最近的滚动祖先是谁，这决定了sticky将会对谁相对定位，也可以理解为对谁使用了fixed。
2. nearest block-level ancestor。最近的块级元素，它则限制了sticky一定要在里面出现。也就是说即使sticky元素对窗口进行了top: 96px定位。但是他的块级元素，已经被滚动出窗口，此时该元素也不会被fixed在窗口之内，更不会距离顶部96px;
3. stacking context。上面两条是使用必知的话，这条就是z-index生成条件必知。也就是说sticky会和"postion: absolute/fixed;"一样。产生层叠上下文。这样也解释了，为什么可以向fiexd一样固定在窗口内。

   一种意想不到的使用场景

   由CSS-position解决的场景不计其数的话，那这种使用方式一定知道的人会少很多。

解决场景：项目有一些老组件，现在业务要求给这些组件内部加一个footer，然后可以在footer放些按钮。

方案1: 相信大家一般都会去改动每个组件dom去实现这个功能。\\
方案2: 其实只需要使用fixed同样修改就可以了。首先：写一个footer组件，是这个组件使用fiexd布局即可，然后每个组件你只需要把现在内容区高度减小footer的高度即可。

具体实现如下：

footer组件

// jsx部分
const  Button  = require("antd")

const footer = () => 
    return <div>
        <Button>1</Button>
        <Button>2</Button>
        <Button>3</Button>
        <Button>4</Button>
    </div>


// less 部分
.footer 
    position: fixed;
    bottom: 0;
    height: 60px;

所有要加footer的组件

.per-component 
    height: calc(600px - 60px); // 600px: 替换成你自己组件高度，需要加footer组件的都需要修改高度
    transform: translateX(0); // 此处为本方案核心： 使footer相对于该组件定位而不是窗口

结语

周末不歇业，不加班，但要学习。愿明天的自己，感谢今天努力的自己。

莫待萧萧两鬃丝！——朱学勉

ios10个实用小技巧（总有你不知道的和你会用到的）

在开发过程中我们总会遇到各种各样的小问题，有些小问题并不是十分容易解决。在此我就总结一下，我在开发中遇到的各种小问题，以及我的解决方法。比较普遍的我就不再提了，这里主要讲一些你可能不知道... 查看详情

你不知道的git技巧：如何实现核心代码保护(代码片段)

大家好，我是shixin。前段时间完成了一个核心代码保护的功能，目标是在关键代码被修改及时同步给其他人，避免没经过review就上线导致问题，提示的效果图如下：在实现的过程中，用到一些平时使用不多... 查看详情

保证你不知道的vue3技巧(代码片段)

微信搜索【大迁世界】,我会第一时间和你分享前端行业趋势，学习途径等等。本文GitHubhttps://github.com/qq449245884/xiaozhi已收录，有一线大厂面试完整考点、资料以及我的系列文章。VNodehooks在每个组件或HTML标签上，我们... 查看详情

100个你不知道的ue4高级技巧(代码片段)

1.PasteHere（复制到这个位置）我们打开编辑器的设置，然后可以设置这个快捷键，例如我们可以设置为左括号之后我们在场景中复制的时候，就可以直接使用这个快捷键，将之前你CtrlC的东西复制到你鼠标... 查看详情

100个你不知道的ue4高级技巧(代码片段)

1.PasteHere（复制到这个位置）我们打开编辑器的设置，然后可以设置这个快捷键，例如我们可以设置为左括号之后我们在场景中复制的时候，就可以直接使用这个快捷键，将之前你CtrlC的东西复制到你鼠标... 查看详情

你不知道的git技巧：如何实现核心代码保护(代码片段)

大家好，我是shixin。前段时间完成了一个核心代码保护的功能，目标是在关键代码被修改及时同步给其他人，避免没经过review就上线导致问题，提示的效果图如下：在实现的过程中，用到一些平时使用不多... 查看详情

你不知道的git技巧：如何实现核心代码保护(代码片段)

大家好，我是shixin。前段时间完成了一个核心代码保护的功能，目标是在关键代码被修改及时同步给其他人，避免没经过review就上线导致问题，提示的效果图如下：在实现的过程中，用到一些平时使用不多... 查看详情

常用的jmeter参数化技巧总结，总有一个你不知道

说起接口测试，相信大家在工作中用的最多的还是Jmeter。JMeter是一个100％的纯Java桌面应用，由Apache组织的开放源代码项目，它是功能和性能测试的工具。具有高可扩展性、支持Web(HTTP/HTTPS)、SOAP、FTP、JAVA等多种协... 查看详情

你不知道的css技巧

背景最近在看css新世界，对于忙于写业务的我，收获颇多。本文不考虑css兼容性。@supports@supports是CSS中常见的@规则，可以用来检测当前浏览器是否支持某个css特性。需求：不支持animation的浏览器，使... 查看详情

小tips：你不知道的npminit(代码片段)

前言在现代新建一个JS相关的项目往往都是从package.json文件开始的，不过这个文件里需要的字段实在是太多了，正常人都记不住，所以npm官方提供了npminit命令帮助我们快速初始化package.json文件。执行之后会有一个交互式的命令行... 查看详情

javascript中你不知道的5个json-使用技巧(代码片段)

开发中，经常使用 JSON.stringify(object) 来序列化对象，但除了第一个参数外，还有其它参数可用...格式化//默认的JSON.stringify(object)出来数据是一行字符串constuser=name:'JackieDYH',age:30,isAdmin:true,friends:['小可爱... 查看详情

四两拨千斤——你不知道的vscode编码typescript的技巧

如果你体验过JAVA这种强类型语言带来的便利，包括其丰富的类型变量、抽象与接口，转而使用JavaScript时，一定会觉得不够满意。尤其是JavaScript声明的变量Number可以轻而易举的分配给String，IDE如何执行任何类型的IntelliSense都让人... 查看详情

205.jetcache：你需要知道的小技巧(代码片段)

 【视频&交流平台】à SpringBoot视频：http://t.cn/R3QepWGà SpringCloud视频：http://t.cn/R3QeRZcà SpringBoot源码：https://gitee.com/happyangellxq520/spring-bootà SpringBoot交流平台：http://4128879 查看详情

100个你不知道的ue4高级技巧(代码片段)

1.PasteHere（复制到这个位置）我们打开编辑器的设置，然后可以设置这个快捷键，例如我们可以设置为左括号之后我们在场景中复制的时候，就可以直接使用这个快捷键，将之前你CtrlC的东西复制到你鼠标... 查看详情

100个你不知道的ue4高级技巧(代码片段)

1.PasteHere（复制到这个位置）我们打开编辑器的设置，然后可以设置这个快捷键，例如我们可以设置为左括号之后我们在场景中复制的时候，就可以直接使用这个快捷键，将之前你CtrlC的东西复制到你鼠标... 查看详情

网页搜索（百度谷歌）你不得不知道的十个小技巧(代码片段)

网页搜索（百度谷歌）你不得不知道的十个小技巧百度搜索广告多，谷歌搜索搜不到东西，这时候，你得问问自己——你，用对姿势了么？文章目录网页搜索（百度谷歌）你不得不知道的十个小... 查看详情

#你不知道的apicloud#五步搞定ios断点调试

纯技术帖,展示的其实是原生开发中一个小技巧,但是可以顺带解决APICloud应用开发过程中的断点调试问题,大幅提高开发效率.准备1.硬件准备:  mac系统+xcode软件.(windows系统,可以花几十大洋,去装个mac虚拟机.)2.技能准备:  会下... 查看详情

分享5个你不知道的软件测试小神器（赶紧收藏起来）

今天给大家分享一下,软件测试的小神器：1、faker软件测试工程师在日常工作中经常需要构造测试数据。功能测试时，通常是去系统中查找存量数据或者手动去造数据。在自动化测试中，我们一般采用固定的测试数据... 查看详情