大家好，我是IT修真院深圳分院第06期学员，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网 CSS任务中可能会使用到的知识点：
POSITION定位有哪几种？各有什么特点？
1.背景介绍
position是CSS中非常重要并且常用的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。
2.知识剖析
position介绍
position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left ，还有 z-index 属性则决定了该元素的最终位置。
position的定位方式共有四个常用的：static、relative、absolute、fixed。还有不常用的：inherit、initial、unset、sticky
top/right/bottom/left
z-index
Z轴上的排序
z-index
从图中可以看出z-index数值越大就越在上面。
那是不是z-index值越大，元素就一定在最上面呢？
答案是否定的，这里就涉及到z-index栈
z-index栈
从右边的图可以看出当给它们的父类容器设置z-index值时，它们子类的层级发生了改变。
由此得出结论：父类容器的 z-index 优于子类 z-index
static
所有元素在默认的情况下position属性均为static。
其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
需要注意的是z-index属性在position为static的情况下无效。
relative
俗称的相对定位，重点在于对相对的理解。我们都知道每个元素在页面的文档流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。
relative的特点
- 仍在文档流之中，并按照文档流中的顺序进行排列。
- 参照物为元素本身的位置。
设置relative最常用的目的为改变元素层级和设置为绝对定位的参照物。
absolute
俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终将以 html 元素进行位置偏移。
absolute的特点
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为第一个定位祖先或根元素（<html> 元素）
fixed
俗称的固定定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display值变更为block。
2.会让元素脱离普通流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的参照物是可以被设置的，而fixed的参照物固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
fixed的特点
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为视窗
3.常见问题
如何利用ABSOLUTE实现三行自适应布局？
4.解决方案
利用ABSOLUTE实现三行自适应布局的方法
结构与样式部分
完整代码
5.编码实战
6.扩展思考
position属性中的sticky是什么？
position:sticky 其实还是一个处于实验性的值。
sticky 英文字面意思是粘，粘贴，所以姑且称之为粘性定位。
这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。
什么是结合两种定位功能于一体呢？
- 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。
- 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
- 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 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.参考文献
参考文献：使用 position:sticky 实现粘性布局
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 元素进行位置偏移。
特点： - 默认宽度为内容宽度
- 脱离文档流
- 参照物为第一个定位祖先或根元素（<html> 元素）
问题3： z-index 的比较，是父级和子级的数值相加总和比较？还是优先父级的数值比较？
回答：父级的 z-index 优于子类 z-index 。
网友评论