乐趣区

关于前端学习: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 时,不参加层级关系比拟
退出移动版