为了使一个固定定位的元素不相对于视口进行定位，你需要为容器元素设置transform、perspective、filter三个属性之一（不为默认值none）。这样固定的元素就会相对于该块级元素偏移，而非视口。
组合选择器 相邻兄弟选择器：A + B 普通兄弟选择器：A ~ B 子选择器：A > B 后代选择器：A B
文档中的层叠上下文由满足以下任意一个条件的元素形成：
根元素 () z-index 值不为 auto 的 position 值为非 static
position 值为非 static
一个 z-index 值不为 auto 的 Flex 项目 (Flex item)，即：父元素display: flex|inline-flex
opacity 属性值小于 1 的元素
transform 属性值不为 none 的元素
mix-blend-mode 属性值不为 normal 的元素
filter 、perspective 、clip-path 、mask 、motion-path 值不为 none 的元素
perspective 值不为 none 的元素
isolation 属性被设置为 isolate 的元素
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
CSS继承：
- 字体相关：font-family、font-style、font-size、font-weight 等；
- 文本相关：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等；
- 列表相关：list-style、list-style-image、list-style-type、list-style-position 等；
- 其他属性：visibility、cursor 等； 属性选择器
- [attr]：指定属性的元素；
- [attr=val]：属性等于指定值的元素；
- [attr*=val]：属性包含指定值的元素；
- [attr^=val] ：属性以指定值开头的元素；
- [attr$=val]：属性以指定值结尾的元素；
- [attr~=val]：属性包含指定值(完整单词)的元素(不推荐使用)；
- [attr|=val]：属性以指定值(完整单词)开头的元素(不推荐使用)；
符合以下任一条件的元素都会产生层叠上下文：
- html 文档根元素
- 声明 position: absolute/relative 且 z-index 值不为 auto 的元素；
- 声明 position: fixed/sticky 的元素；
- flex 容器的子元素，且 z-index 值不为 auto；
- grid 容器的子元素，且 z-index 值不为 auto；
- opacity 属性值小于 1 的元素；
- mix-blend-mode 属性值不为 normal 的元素；
- 以下任意属性值不为 none 的元素：
- transform
- filter
- perspective
- clip-path
- mask / mask-image / mask-border
- isolation 属性值为 isolate 的元素；
- -webkit-overflow-scrolling 属性值为 touch 的元素；
- will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素；
- contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。
如何比较两个元素的层叠等级？
- 在同一个层叠上下文中，比较两个元素就是按照上图的介绍的层叠顺序进行比较。
- 如果不在同一个层叠上下文中的时候，那就需要比较两个元素分别所处的层叠上下文的等级。
- 如果两个元素都在同一个层叠上下文，且层叠顺序相同，则在 HTML 中定义越后面的层叠等级越高。
常见面试题： 1、div居中、弹窗居中 2、多列自适应布局，两列布局 3、rem适配方案 4、多行居左，单行居中 5、页面性能优化，图片，iconfont 6、css3动画，动画卡顿
• 说下你常用的几种布局方式，集中往盒模型、flex布局说(至于grid布局，这个我看过没有用到过)
• 实现水平居中的几种方法？
• animate和translate有没有用过，一些常见的属性说下？
• CSS实现宽度自适应100%，宽高16:9的比例的矩形。
• 如何实现左边两栏一定比例，左栏高度随右栏高度自适应
