CSS定位元素细说

静态定位

静态定位,默认定位方式,显示位置与书写位置一致。默认CSS语法是position:static;(可写可不写)

position:static;不是定位元素!!!

定位元素有哪些:只要不是static的都是定位元素,这里主要说其他三种定位元素。

描述
static 默认值,非定位元素
relative 相对定位,相对于自身在文档流之中的位置进行偏移。多数时候充当一个定位父级。
absolute 绝对定位,根据定位元素(定位父级)来进行偏移,如果找不到定位父级,就根据视口进行定位偏移。
fixed 固定定位,相对于视口进行定位偏移。

相对定位

元素相当于自身在文档流之中的位置进行偏移。

CSS语法:position:relative;

相对定位的元素仍然在文档流之中,大多数用在绝对定位之中,来充当定位父级。

定位父级的概念,绝对定位会用到,绝对定位position:absolate会寻找定位父级。来根据定位父级进行定位。

.container > .box1{
    position:relative;
    top:2em;
    left:1em;
}

绝对定位

绝对定位,相对于距离它最近的的上一级“定位元素”进行定位
绝对定位必须要有一个定位参考的父元素,也叫"定位父级"
如果找不到定位父级,就相对于视口来进行定位。

元素一旦成为定位元素之后,就会有四个属性可以使用:topleftrightbottom

定位父级大多数时候是:position:raletive;

CSS语法:position:absolute;

      /* 将container容器设置为定位父级 */
      .container {
        position: relative;
      }
      .container > .box2 {
        background-color: violet;
        position: absolute;
        top: 2em;
        left: 4em;
      }


找不到定位父级的情况:

绝对定位的两个注意:

  1. 元素一旦定位就脱离文档流,后面的元素会自动向上补位
       .container {
         position: relative;
       }
       .container > .box1 {
         background-color: bisque;
         position: absolute;
         top: 5em;
       }


  1. 如果元素找不到定位父级,那就相对于当前视口进行定位
       .container {
         /* 元素一但设置了定位为static后,就不是定位元素。所以static 可写可不写 */
         positon: static;
       }
       .container > .box1 {
         position: absolute;
         background-color: violet;
         top: 1em;
         left: 5em;
       }

固定定位

固定定位是相对于视口来进行定位偏移。
CSS语法position:fixed;

      .container > .box2 {
        position: fixed;
        top: 15em;
        left: 10em;
      }

最后修改:2020 年 11 月 01 日 03 : 41 PM
如果觉得我的文章对你有用,请随意赞赏