CSS样式——元素定位

  • 相对定位

    position:relative

    1. 在没有设置偏移量时,对元素本身没有影响
    2. 设置相对定位后,元素不会脱离文档流,并且不会影响其他元素布局,但依旧占位
  • 绝对定位

    position:absolute

    1. 设置绝对定位后,元素会脱离文档流
    2. 设置绝对定位后,行内元素支持块元素特性,块元素支持行内元素特性
    3. 设置绝对定位后,元素参照最近设置相对定位的父级元素进行偏移定位,如果所有父级元素没有进行设置相对定位,则按照整个文档窗口进行定位
  • 固定定位

    position:fixed

    1. 始终以浏览器可视窗口进行定位,不会受到窗口滚动和父级元素定位的影响
    2. 设置固定定位后,元素脱离文档流
    3. 设置固定定位后,行内元素支持块元素特性,块元素支持行内元素特性
  • 黏性定位

    position:sticky

    1. 没有到达指定偏移位置无定位效果,当到达指定偏移位置后元素固定在那个位置不动
  • 设置定位元素偏移量

    向左偏移语法:`left:10px`
    向右偏移语法:`right:10px`
    向上偏移语法:`top:10px`
    向下偏移语法:`bottom:10px`
  • 设置定位元素显示层级关系

    z-index:数值

    1. 设置定位元素的层叠顺序,值越大,层级就越高,显示在上层
    2. 父元素的层级会影响子元素的层级关系
    3. 值为auto时,不参与层级关系比较

你可能感兴趣的