同一个元素中同时使用浮动和定位

当在同一个元素中同时使用浮动和定位时，分情况讨论：

1、float 可以和 relative 混用：两个同时起作用

经常用于父元素浮动，里面的子元素定位

<div class="father">
  <div class="son"></div>
</div>
.father {
  background: #b3b3ff;
  height: 500px;
  width: 500px;
  float: right;
  position: relative;
}
.son {
  background: #b7cffb;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
}

---

2、 float 和 absolute 不可以混用 ：float不生效

一旦混用浮动和绝对定位，则绝对定位会使浮动属性失效

---

3、 一个块float和另一个absolute块的z轴位置

absolute 不设置z-index的情况下

absolute 设置z-index = -1的情况下