1、div的分层

• 布局和定位的区别：布局是屏幕平面上的，定位是垂直于屏幕的
• background 背景的范围是：border外边沿围成的区域
• 文字内容在border上面，border在background上面
• 顺序（从最上方到最下方）：内联子元素 => 浮动元素 => 块级子元素 => border => background
• 内联子元素内容 = 正常块级子元素的内容 => 浮动元素中的内容
• 浮动元素脱离文档流，其实就是浮起来了一点的

2、position属性

五个属性：

1. static：默认值，呆在文档流内
2. relative ： 相对定位，升起来，但不脱离文档流
   1. 用于做位移：很少用
   2. 用于给absolute元素做爸爸
   3. 配合z-index（每个元素默认的z-index=auto，不会创建新的层叠上下文，auto计算值为0，但不等于0）
   4. 绝对不能写z-index=9999
3. absolute ： 绝对定位，定位基准是祖先里的非static

   1. 设置absolute的元素的上级元素中，必须设置position:relative

   2. 脱离原来的位置，另起一层，比如对话框的关闭按钮

   3. 鼠标提示

   4. 配合z-index

   5. absolute定位是相对于祖先元素中最近的一个定位元素定位的（只要position不是static，就是定位元素）

   6. 部分浏览器如果不写top/left就会位置错乱

   7. 善用left:100%;

   8. 善用left:50%;加负margin

4. fixed：固定定位，定位基准是viewport（存在问题）
   1. 不要把带有fixed属性的元素放到带有transform属性的元素中，会出现不可预知的后果
   2. 配合z-index
   3. 注意：手机上不要使用position:fixed，会有无数问题
5. sticky：粘滞定位（兼容性太差，很少使用，主要用于面试，适用于导航等）

• white-space : nowrap；文字内容不准换行

• 鼠标提示，鼠标移过时显示内容：

button span{
    display:none;
}
button:hover span{
    display:block;
}

3、定位元素的分层

• 只要元素成为了定位元素，也就不是static，就会跑到内联元素内容的上方
• 如果定位元素的z-index的值<0，如-1，就会到background的下方

4、层叠上下文（堆叠上下文）

• 每一个层叠上下文都是一个新的小世界（作用域）
• 一个小世界里面的z-index与外层无关
• 处于同一个小世界里的z-index才能比较

5、哪些不正交的属性可创建层叠上下文

1. 查看 MDN文档
   1. z-index值不为“auto”的相对/绝对定位
   2. z-index 值不为“auto”的flex项目
   3. opacity属性值小于1的元素
   4. transform属性值不为“none”的元素
   5. position:fixed的元素
2. 忘了就搜“层叠上下文 MDN”
3. opacity:0.5 设置透明度，与background中的rgba中的透明度设置有什么区别：opacity 设置内容中的所有元素，background中的background只会涉及背景色

6、负z-index与层叠上下文

• 负z-index也逃不出层叠上下文
• 也就是说z-index =-1不一定能逃出一个div，除非这个div不是层叠上下文