2021-09-22

CSS定位属性

主要用于设置目标组件的位置。

position

• static:默认值，没有定位，元素将出现在正常的位置，这种方式会忽略top,right,bottom,left,z-index属性。
• absolute:生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位，如果一直找不到，则相对于页面定位，位置通过top，right，bottom，left进行规定。
• relative：生成相对定位的元素，相对于其正常位置进行定位，但不会脱离文档流。
  定位位置
  top：用于设置定位元素相对的对象的顶边偏移的距离，正数向下偏移，负数向上偏移。
  right：用于设置定位元素相对的对象的右边偏移的距离，正数向左偏移，负数向右偏移。
  bottom：用于设置定位元素相对的对象的底边偏移的距离，正数向上偏移，负数向下偏移。
  left：用于设置定位元素相对的对象的左边偏移的距离，正数向右偏移，负数向左偏移。
  注意：*如果水平方向同时设置了left和right，则以left属性值为准。同样，如果垂直方向同时设置了top和bottom，则以top属性值为准。
  z-index
  用于设置目标对象的定位层序，数值越大，所在的层级越高，覆盖在其他层级之上，该属性仅在position:absolute时有效。其默认值是auto，堆叠顺序与父元素相同。