你好。 我是IT修真院深圳分院第06届学生，诚实善良的网络程序员。
今天分享给大家，修真院官网CSS任务中可能会用到的知识点：
定位有几种？ 各自有什么特征？
1 .背景介绍
position是CSS中非常重要和常见的属性之一，使用position属性可以从常规位置、父元素或浏览器窗口偏移元素。
2 .知识解析
位置介绍
位置属性确定元素在文档中的放置方式。 top、right、bottom和left以及z-index属性决定了元素的最终位置。
定位有四种常见方法：静态、延迟、解决和固定。 有些不常用。 inherit、initial、unset、sticky
top/right/bottom/left
z索引
z轴上的排序
z索引
从图中可以看到，z-index的数值越大，越向上。
那z-index的值越大，元素就一定在最上面吗？
答案是否定的。 现在我们来谈谈z-index堆栈
z索引堆栈
从右图中可以看到，为父容器设置z-index值将更改子类的级别。
由此得出父容器的z-index优于子类的z-index的结论
静态
默认情况下，所有元素的位置属性都是静态的。
这是一种在更改元素的位置属性后，可以将元素重置为静态，并恢复为页面的默认文档流的用法。
需要注意的是，z-index属性在位置为静态时无效。
可撤销
俗称的相对定位，侧重于相对理解。 我们知道每个元素在页面的文档流中都是“默认位置”。 这个位置可以理解为默认位置。 相对位置是将元素从元素的默认位置移动，但在文档流中仍然处于原始默认位置，并不远离文档流。 只是视觉上偏移了。
延迟的特点
它保留在文档流中，并按文档流中的顺序排序。
参照物是元素自身的位置。
设置relative的最常见目的是更改元素级别，并设置要设置为绝对位置的参照物。
absolute
俗称的绝对定位、绝对定位是相对的，怎么理解呢？ 应用了position: absolute的元素通过最近的非静态位置相对于祖先元素的偏移来确定元素的位置。 如果祖先元素没有设置非静态定位属性，则最终该元素将由html元素偏移位置。
absolute的特征
默认宽度是内容的宽度
脱离文档流程
参照物确定最初祖先或根的元素(元素)
固定的
俗称的固定定位。 当滚动屏幕时，此放置方法经常用于创建固定在相同位置的元素。 固定和解决方案有很多共同点：
1 .更改内联元素的混合模式，并将显示值更改为block。
2 .使元素脱离正常流动，不占用空间。
3 .默认情况下，它被非定位元素覆盖。
fixed和absolute的最大区别是可以设置absolute的参照物，并且fixed的参照物固定在浏览器窗口中。 也就是说，美丽的菠萝滚动页面，其元素和浏览器窗口之间的距离恒定。
固定特征
默认宽度是内容的宽度
脱离文档流程
参照物是窗口
3 .常见问题
如何使用ABSOLUTE实现三行自适应布局？
4 .解决方案
如何利用ABSOLUTE实现三行自适应布局
结构和样式部分
完整的代码
5 .编码实战
6 .拓展思维
位置属性的sticky是什么？
position:sticky其实还是实验性的值。
因为sticky的英语字面意思是粘在一起、贴在一起，所以姑且称之为粘性定位。
这是一种特殊定位，结合了position:relative和position:fixed两种定位功能，适用于某些特殊场景。
什么是两种定位功能的结合？
元素首先按照常规文档流进行放置，然后与流中该元素的流根(bfc )和连接块(containing block )相关联进行放置。
元素定位在超过特定阈值之前是相对定位，然后是固定定位。
此特定阈值是指顶部、灯光、底部或左侧
之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。粘性定位
按照常规做法，大概是监听页面 scroll 事件，判断每一区块距离视口顶部距离，超过了则设定该区块 position:fixed，反之去掉。
嗯，看看上面的 CSS 代码，只需要给每个内容区块加上
{
position: -webkit-sticky;
position: sticky;
top: 0;
}
就可以轻松实现了。
简单描述下生效过程，因为设定的阈值是 top:0 ，这个值表示当元素距离页面视口(Viewport，也就是fixed定位的参照)顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。
不理解可以再看看下面这两张示意图(top:20px 的情况，取自开源项目fixed-sticky)：
距离页面顶部大于20px，表现为 position:relative;
距离页面顶部小于20px，表现为 position:fixed;
这个属性的使用场景是什么呢？
运用 position:sticky 实现导航栏固定，也是最常见的用法：
导航栏
生效规则
position:sticky 的生效是有一定的限制的，总结如下：
1.须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
2.设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：
如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewport 定位。
3.达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。
不乐观的兼容性
粘性定位虽然好用，但是目前的兼容性并不好。
兼容性差
7.参考文献
8.更多讨论
问题1：什么是BFC？
回答：
在W3C规范中的BFC是这样定义的：
浮动元素和绝对定位元素，非块级盒子的块级容器(例如，inline-block、table-cells和table-captions)，以及overflow值不为visiable的块级盒子，都会为他们的内容创建新的BFC(块级格式上下文)。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)。对于从右到左的格式来说，则触 碰到右边缘。
规范中的描述可能难让人理解，我们再来看看BFC的一种通俗理解：
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子(实际上是看不见摸不着的)，箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。)并且在一个BFC中，块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。著作权归作者所有。
问题2：position中的 relative 和 absolute 有什么区别？
回答2：relative 为相对定位，我们都知道每个元素在页面的文档流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。
特点：
仍在文档流之中，并按照文档流中的顺序进行排列。
参照物为元素本身的位置。
absolute 为绝对定位。应用了 absolute 的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终将以 html 元素进行位置偏移。
特点：
默认宽度为内容宽度
脱离文档流
参照物为第一个定位祖先或根元素( 元素)
问题3： z-index 的比较，是父级和子级的数值相加总和比较？还是优先父级的数值比较？
回答：父级的 z-index 优于子类 z-index 。