CSS（4）定位｜青训营笔记

青青草原没有前端
123 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第4天

1、positon定位

1.1 定位

  • 定位是一种更加高级的布局手段；

  • 通过定位可以将元素摆放到页面的任意位置；

  • 使用position属性来设置定位；

    可选值：

    1. static 默认值，元素是静止的没有开启定位；
    2. relative 开启元素的相对定位；
    3. absolute 开启元素的绝对定位；
    4. fixed 开启元素的固定定位；
    5. sticky 开启元素的粘滞定位；

1.2 相对定位——relative

  • 当元素的position属性值设置为relative时，即开启了相对定位；

  • 相对定位的特点：

    1. 元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化；
    2. 相对定位是参照于元素在文档流中的位置进行定位的（即元素的初始位置为坐标原点）
    3. 相对定位会提升元素的层级（他所处的层级高于文档流的层级 所以会出现遮盖）；
    4. 相对定位不会使元素脱离文档流（所以移动开启相对定位的元素，该元素下方的元素不会改变位置）；
    5. 相对定位不会改变元素的性质，块还是块，行内还是行内；

  • 偏移量（offset）

    当元素开启定位以后，可以通过偏移量来设置元素的位置；（只有开启定位才可以设置偏移量）

    top 定位元素和定位位置上边的距离（可以想成margin-top 设置margin-top会挤下去下面的元素 而设置top则会覆盖下边元素）

    bottom 定位元素和定位位置下边的距离

    定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下只使用一个值

    left 定位元素和定位位置左侧距离

    right 定位元素和定位位置右侧距离

    定位元素水平方向的位置由left和right两个属性来控制，通常情况下只使用一个值

    1.3 绝对定位——absolute

    • 当元素的position属性值设置为absolute时，则开启了元素的绝对定位；

    • 绝对定位的特点：

      1. 开启绝对定位后，如果不设置偏移量元素的位置不会发生改变；
      2. 开启绝对定位后，元素会从文档流中脱离；
      3. 绝对定位会改变元素的性质（和浮动相似），行内变成块，块的宽高被内容撑开；
      4. 绝对定位会使元素提升层级；
      5. 绝对定位元素是相对于其包含块进行定位的

    • 包含块：（containing bolck）

      正常情况下，包含块就是离当前元素最近的祖先块元素；

      开启绝对定位的包含块就是离他最近的开启了定位的祖先元素（只要祖先元素定位值不是static）

      如果所有的祖先元素都没有开启定位，则根元素就是它的包含块（把网页左上角当做坐标原点定位）

    • html（根元素、初始包含块）

    • 绝对元素的布局

      水平方向

      1. 当我们开启绝对定位后，水平方向的布局等式需要添加left和right两个值，此时规则和之前一样，只是多添加了两个值；

      2. 当发生过渡约束时（等式不成立时）如果9个值中没有auto，则自动调整right的值以使等式满足（不再调整margin-right）

        如果有auto，则会自动调整auto的值以使等式满足；

      3. 可设置auto的值：margin width left right

        left和right的默认值是auto，所以如果不设置right和left，则等式不成立时，会自动调整这两个值

      垂直方向

      1. 垂直方向布局的等式也必须要满足；

      2. 可以实现元素垂直、水平双方向居中；（在包含块中居中）

        实现方式top、bottom、left、right的值全设置为0，margin设置为auto即可

    1.4 固定定位——fixed

        -   将元素的position属性设置为fixed，则开启了元素的固定定位；

    -   固定定位也是一种绝对定位，所以固定定位大部分特点都和绝对定位一样；

    -   唯一不同的是，固定定位永远参照浏览器的视口进行定位；

    -   视口指的是浏览器的窗口，即永远在浏览器的左上角定位，滚动滚动条也不会消失（小广告）

        视口和html根元素是不同的两个概念，滚动滚动条，浏览器的根元素会上移，视口会永远保持不变；

    -   固定定位的元素不会随网页的滚动条滚动

    1.5 粘滞定位（兼容性不是很好）——sticky

        -   将元素的position属性设置为sticky，则开启了元素的粘滞定位；
    -   粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定；

    2、元素的层级

        -   对于开启了定位的元素，可以通过z-index属性来指定元素的层级；
    -   z-index需要一个整数作为参数，值越大元素的层级越高；
    -   元素的层级越高越优先显示 ；
    -   如果元素的层级一样，则优先显示结构上靠下的元素；
    -   **只要开启了定位，则他们的层级都是一样的，需要通过z-index来指定层级**
    -   祖先元素的层级再高，也不会盖住后代元素。
avatar
文章
阅读
粉丝