Background指的是哪一块？
Div的分层结构
什么叫标准文档流？
就是在页面中所有元素都没有人为设置的情况下的排列方式，block元素会按照从上到下顺序排列，而inline元素会按照从左到右顺序排列
position的5种取值
默认取值为static
- absolute 与 fixed 脱离文档流
- 关于absolute，为什么我们常说父元素relative 子元素absolute，
- absolute是相对于祖先元素中最近的非static元素定位的
- relative 的意思是相对于自身的定位，需要配合方向一起使用
relative 的意思是相对于自身的定位
- 使用relative+方向属性造成的对象偏移现象并不会改变对象在文档中占位的空间，但是如果再配合margin和padding则会有影响
- 经测试，margin会影响relative对象在文档中占位的空间，而padding属性在border-box模型下会影响relative对象在文档中占位的空间，这也很好理解。 代码示例
position:relative;
top:20px;
- 可以用于做对齐，但已不再这么做，最低端的做法，现在都用flex了
代码示例
absolute
- absolute是相对于祖先元素中最近的非static元素定位的
- absolute一定要把top/left这类属性一起写，因为如若不然，某些浏览器会出错
- 善用top/bottom/left/top:100% 代码示例
fixed 固定在相对于视口的定位
- 如果fixed遇到transform属性会失效
- 移动端不要用这个属性,太多bug
sticky
特别适合顶部的导航栏,一旦页面过长,下滚后,导航栏会粘在视口顶部,但是兼容性太差了,几乎没法用,只能用于面试.
css中的层叠上下文(stacking context)
- 默认最基础的SC是由根元素html标签默认创建的
- 子代SC只能在父代SC之上玩耍,无法穿透父代这个托盘
如何理解子代SC无法穿透父代SC这个托盘呢?
深入理解-即使是负的z-index也无法穿透到托着它的那一层层叠上下文的下面
Div层级结构/非static定位下层级结构
z-index
- 对于一个已定位dom（即 position≠static）z-index 属性才会生效
- 默认值为auto,不会创建层叠上下文
- index取值auto≠0,auto不能与position共同创建层叠上下文,而0可以;
- z-index=-1,-2,-3...的元素都会存在于background的下面,见上图
- z-index要慎用;只有处于同一个SC中的z-index才能比较
如何创建层叠上下文呢?主要5种，自行查看mdn文档
- 'position:relative/absolute' && 'z-index≠默认值auto(0,1,2,3....-1...都可)'
- position:fixed
- 'flex容器内的子元素' && 'z-index≠默认值auto'
- opacity 属性值小于 1 的元素
- transform≠none
层叠上下文MDN
z-index:10与z-index:5哪个在上面呢
- 没有单独创建SC的情况下(即z-index:10与z-index:5的两个元素处于同一SC的情况下)10的高于5
代码示例 - 但若z-index:10的元素外层包着一层z-index=4的独立SC的话,那么10与5不是同一层的了,5就与4比较了,5>4,但表象是5的高于10
代码示例
