Position定位详细总结

·  阅读 2004
Position定位详细总结

前言

position定位在css布局中扮演着重要的角色,相信大家都会使用position,但是是否真正的了解它呢?于是我花了一点时间对position常用的属性进行了总结。

1.margin、padding定位

  • 如果没有position,在标准流中,使用margin、padding对元素进行定位是比较常见的,其中margin还可以设置负数;

  • 缺点:设置一个元素的margin或padding,通常会影响到标准流中其它元素的定位效果,不便于实现元素的层叠效果;

  • 那么什么是标准流呢?可以参考下面这篇文章:

    标准流以及脱标元素的特点

2.CSS定位属性-position

利用position可以对元素进行定位,常用取值有4个:

2.1.静态定位-static

  • static为position属性的默认值,在不设置position属性时就是static;
  • 元素按照标准流进行排布;
  • 对于static,设置left、right、top、bottom是没有任何效果的;

2.2.相对定位-relative

  • 元素按照标准流进行排布;
  • 定位参照对象是元素自己原来的位置,可以通过left、right、top、bottom来进行位置调整;
  • 相对定位应用场景:在不影响其它元素位置的前提下,可以对当前元素位置进行微调

image-20211223095253528.png

2.3.绝对定位-absolute

  • 元素脱离标准流(脱标);
  • 定位参照对象是最近一级拥有定位的祖先元素,可以通过left、right、top、bottom来进行位置调整;
  • 如果一直往上层元素找不到有定位的元素,那么最终的参照对象为视口;
  • 拥有定位的祖先元素:position的值不为static的元素;

image-20211223102116341.png

2.4.固定定位-fixed

  • 元素脱离标准流(脱标);
  • 定位参照对象是视口(viewport),可以通过left、right、top、bottom来进行位置调整;
  • 当画布滚动时,元素的位置是固定不动的;

image-20211223102406071.png

画布和视口

  • 画布:整个网页的大小;
  • 视口:浏览器所能展示的区域;
  • 一般情况下,画布 >= 视口;

3.绝对定位技巧

3.1.子绝父相

在绝大多数情况下,子元素的绝对定位都是相对于父元素进行定位的,虽然给父元素的position设置relative、absolute、fixed都可以,但是如果不希望父元素脱标,常用解决方案是:

  • 父元素设置position: relative;(让父元素成为定位元素,又不脱离标准流);
  • 子元素设置position: absolute;

3.2.绝对定位元素的公式应用

  • 绝对定位元素(absolutely positioned element):position值为absolute或者fixed的元素,因为absolute在没有找到祖先定位元素时,也是参考视口进行定位的,和fixed的效果一样。

  • 对于绝对定位的元素,会满足以下两个公式:

    • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素实际占用宽度;
    • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素实际占用高度;

    image-20211223112308766.png

  • 如果希望绝对定位元素的宽高和定位参照对象一样,可以给绝对定位元素设置以下属性,这也是为什么定位能够实现盒子的水平垂直居中。

    • left、right、top、bottom全部设置为0,margin设置为auto;
    • 根据上面公式,margin + 绝对定位元素实际占用宽高 = 定位参照对象的宽高,盒子自然就水平垂直居中显示了
    • 示例代码:
    .box {
      position: relative;
      width: 500px;
      height: 300px;
      background-color: red;
    }
    
    .inner {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100px;
      height: 100px;
      background-color: blue;
    }
    复制代码
    <div class="box">
      <div class="inner"></div>
    </div>
    复制代码
    • 运行结果:

      image-20211223112846734.png

4.定位元素的层叠现象

给元素添加定位,可能会出现元素的层叠,层叠的顺序一般满足以下规律:

  • 父子关系:子元素会层叠在父元素上。

  • 非父子关系。

    元素类型层叠顺序
    都是非定位元素在标准流中一般不存在层叠现象
    1个是定位元素,1个是非定位元素定位元素会层叠在非定位元素上
    都是定位元素默认后面的定位元素层叠在前面的定位元素上,使用css属性z-index来控制层叠顺序
  • z-index属性。

    • z-index属性用来设置定位元素的层叠顺序**(仅对定位元素有效,非static)**,取值可以是正整数、负整数、0;
    • 比较规则:
      • 如果是兄弟关系:z-index越大,层叠在越上面,z-index相等,写在后面的元素层叠在上面;
      • 如果不是兄弟关系:各自从元素本身以及祖先元素中,找出最邻近(兄弟关系)的2个定位元素进行比较,而且在2个定位元素必须有设置z-index的具体数值;

    image-20211223143218194.png

5.position总结

position取值脱离标准流定位元素绝对定位元素定位参照对象
static没有
relative元素自己原来的位置
absolute最近一级拥有定位的祖先元素(如果找不到,就以视口为参照对象)
fixed视口
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改