position定位属性，有五种类型。
定义position之后会有left，top，right，bottom，4个属性来决定元素位置，决定方式也和position定义的类型有关，使用了这四个位置属性才能让定位属性生效。
决定元素定位显示的还有z-index 堆叠属性。两个定位元素，没有指定z-index时，默认后一个在前一个元素上面显示，即覆盖显示。z-index属性可以正也可以是负值。浏览器的显示默认层级为0。当一个定位元素A的堆叠属性高于相邻的另一个B时，在重叠位置A会覆盖B。tips：若A中有定位元素C，C的堆叠属性无论多大都覆盖B。
1.static，静态定位，元素出现在正常的流中，不会受到四个位置属性的影响。
2.fixed，固定定位，元素不会出现在文档流中，位置相对于浏览器窗口是固定位置，Fixed定位的元素和其他元素重叠。
3.relative，相对定位，相对定位相对的是元素在文档流中原本的位置，相对定位的元素用四个位置属性进行移动时会与其他元素重叠，但原本位置在文档流中存在。
4.absolute，绝对定位，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>元素。绝对定位元素不会出现在文档流中。
5.sticky ，英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
tips：注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
网友评论