定位和层叠上下文

定位

固定定位 fixed

将元素固定到视口某个位置，top、left等属性相对于视口定位。

元素宽度由内容撑起。

绝对定位 absolute

绝对定位会相对于祖先元素中有定位的那个元素定位，如果祖先元素都没有设置定位，则相对根元素定位。

元素宽度由内容撑起。

相对定位 relative

相对定位相对于原来的位置进行定位。

静态定位 static

默认定位，也可以认为没有定位，元素的位置由文档流决定。

粘性定位 sticky

新出的定位类型，是相对定位和固定定位的结合体，正常情况下，元素会随着页面滚动，当到达屏幕的特定位置时，如果用户继续滚动，它就会固定在这个位置。

层叠上下文

概述

层叠上下文是用来处理元素直接的重叠问题。当使用定位后很容易出现元素之间的重叠，那么层叠上下文就决定了哪些元素离用户更近，也就是说层叠上下文决定了哪些元素能够显示出来，哪些元素会被遮挡。

层叠顺序

不使用定位时，元素在HTML里出现的顺序决定了绘制的顺序。

定位元素时，浏览器会先绘制所有非定位的元素，然后绘制定位元素。默认情况下，所有的定位元素会出现在非定位元素前面。

z-index属性的值可以是任意整数，可以控制元素的层叠上下文，z-index谁越大，元素就越靠前。

z-index

z-index只对定位元素有效（当然静态定位除外）。

设置定位和z-index就可以创建层叠上下文，但是除此之外还可以小于1的opacity属性，还有transform、filter属性。

层叠上下文

一个层叠上下文包含一个元素或者由浏览器一起绘制的一组元素。其中一个元素会作为层叠上下文的根，比如给一个定位元素加上z-index的时候，它就变成了一个新的层叠上下文的根。所有后代元素就是这个层叠上下文的一部分。

层叠上下文里面的子元素即使z-index小于该层叠上下文，甚至可以是复数，也仍然会显示在此层叠上下文的前面。

一个层叠上下文的根无法显示在另一个层叠上下文与其子元素的层叠上下文之间。

层叠上下文顺序

从后到前

• 层叠上下文的根

• z-index为负的定位元素

• 非定位元素

• z-index为auto的元素

• z-index为正的元素