CSS 定位

一个 div 的分层

由上到下：

• 文字内容（内联子元素）——> 浮动元素（float） ——> 块级子元素（div） ——> border ——> background

新属性 - position

position

• static 默认值，待在文档流里
• relative 相对定位，升起来，但不脱离文档流
• absolute 绝对定位，定位基准是祖先里的非 static
• fixed 固定定位，定位基准是 viewport（有诈）
• sticky 粘滞定位

注意

• 如果写了 absolute，一般得补一个 relative
• 如果写了 absolute 或 fixed，一定要补 top 和 left
• sticky 兼容性很差

position: static（默认）

• 当前元素就在文档中
• 写不写都一样，一般来说不写

position: relative （相对定位）

• 占用的位置不变，但是显示的地方和原来发生了变化

.demo{
  border: 1px solid green;
  width: 50px;
  height: 50px;
  position: relative;
  top: 10px;
  left: 10px;
}

使用场景

• 用于做位移（很少用）
• 用于给 absolute 元素做父元素

配合 z-index

• z-index: auto 默认值，不创建新层叠上下文
• z-index: 0/1/2
• z-index: -1/-2

position: absolute （绝对定位）

使用场景

• 脱离原来的位置，另起一层，比如对话框的关闭按钮
• 鼠标提示

配合 z-index

注意

• 善用 left: 100%
• 善用 left: 50%; 加负 margin
• 某些浏览器如果不写 top/left 会位置错乱
• 一定要有一个父元素做参照，父元素加上 position: relative

小技巧

• white-space: nowrap; 文字内容不准换行
• 开发者工具选择两次 hover 可以展示 hover 内容

position: fixed

使用场景

• 烦人的广告
• 回到顶部按钮

配合 z-index

注意

• 手机上尽量不要用这个属性

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

• 定位元素在其他未定位元素上面
• 可以用 z-index 来调节
• 再后也不能跑到 HTML 后面\

比喻

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

哪些不正交的属性可以创建它

• z-index / flex / opacity / transform
• opacity 和 background 的 rgba 的透明度的区别：opacity 影响作用域内的所有元素