css position 绝对定位

118 阅读1分钟

什么时候使用绝对定位

下面三个条件满足任何一个时,使用绝对定位:

  1. 元素出现在一个天马行空的位置
  2. 元素是否存在,不影响其他元素的排列
  3. 单个元素在某个区域内水平垂直居中

fixed和absolute的区别

fixed是绝对定位的一种特殊情况,它们的参考系不一样

  • absolute参考有定位的父元素
  • fixed参考视口(viewport)

居中

image.png 使用position:abslute

top:50%; left:50% 是相对左上角的

image.png

使用负margin 相对于自身宽高的一半进行设置

image.png