css定位

布局和定位的区别：布局是在屏幕平面上的，定位是垂直于屏幕的。

div的分层

z-index<0，就表示这个元素在background后边。
z-index越大越靠上。

position的五个取值

• position: relative相对定位，升起来但是不脱离文档流。
  元素所在的位置不变，显示的位置和之前有所偏移。
  z-index默认是auto，算出来是0但不等同0

  
  使用场景：和absolute配合使用，祖先元素relative，子元素absolute，使用absolute的子元素定位是相对于使用relative的祖先元素中最近的一个定位元素的。

• position: absolute
  使用场景：1. 脱离原来的位置，另起一层，比如对话框的关闭按钮。2. 鼠标提示。
  配合z-index;
  经验：
  善用left: 100%;(想把元素放在右边)
  善用left: 50%; 加负margin
  某些浏览器上如果不写top/left会位置错乱。

• position: fixed;
  使用场景：1. 回到顶部。 2. 凡人的广告
  不管页面怎么动，都相对于视口定位(视口就是在屏幕上显示的区域，iframe元素)
  不要把有fixed的属性的元素放在有transform的元素中
  配合z-index;
  经验：不要在手机上使用fixed；

position属性总结：

• static默认值，呆在文档流中
• relative相对定位，升起来，但是不脱离文档流
• absolute绝对定位，定位基准是祖先里的非static
• fixed固定定位，定位基准是viewport(视口)
• sticky粘滞定位

层叠上下文

每个层叠上下文就是一个新的小世界
这个小世界里的z-index跟外界无关
处在同一个小世界的z-index才能比较
除了z-index=auto不创建层叠上下文，别的z-index都可以创建(放在有非static的position标签中)可以创建层叠上下文。
还有哪些属性可以创建层叠上下文呢？
MDN文档有写。

opacity: 0.5; 和 background: rgb(255,255,255,0.5)两种表示透明度的属性有什么区别？
opacity定义的是整个元素的透明度，包括字符等。而rgba只表示背景颜色透明。
负的z-index不一定能逃出。