相对/绝对/固定定位

头像
shasha
    阅读 6 分钟

    1. 定位：

    指的就是将指定的元素摆放到页面的任意位置。

    2. position属性

    通过position属性来设置元素的定位

    • 可选值：

      • static 默认值，元素没有开启定位
      • relative 开启元素的相对定位
      • absolute 开启元素的绝对定位
      • fixed 开启元素的固定定位（也是绝对定位的一种）

    当元素的position属性设置为relative时，则开启了元素的相对定位。

    position: relative;/*开启定位*/
left: 100px;/*设置偏移量*/

    当开启了元素的定位(position属性值非static)时，可以通过left right top bottom四个属性来设置元素的偏移量

    • left 元素相对于其定位位置的左侧偏移量
    • right 元素相对于其定位位置的右侧偏移量
    • top 元素相对于其定位位置的上侧偏移量
    • bottom 元素相对于其定位位置的下侧偏移量

    通常偏移量只需要使用两个就可以对一个元素进行定位。一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位。

    relative 相对定位

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

    • 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
    • 相对定位是相对于元素在文档流中原来的位置进行定位
    • 相对定位的元素不会脱离文档流
    • 相对定位会使元素提升一个层级
    • 相对定位不会改变元素的性质，块还是块，内联还是内联
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /*将box2定位到box3的右侧*/
            position: relative;
            left: 100px;
            top: 100px;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

    </style>
</head>
<body>
<!-- 快捷键 div.box$*3 + Tab-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

    结果：
    image.png

    absolute 绝对定位

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

    • 绝对定位特点：

      • 开启绝对定位，会使元素脱离文档流
      • 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

      • 绝对定位是相对于离它最近的，开启了定位的祖先元素进行定位的（一般情况下，开启了子元素的绝对定位，同时也会开启父元素的相对定位）

        • 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
      • 绝对定位会使元素提升一个层级

      • 绝对定位会改变元素的性质

        • 内联元素会变成块元素
        • 块元素的宽度和高度默认被内容撑开
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style type="text/css">
       .box1 {
           width: 100px;
           height: 100px;
           background-color: pink;
       }

       .box2 {
           width: 100px;
           height: 100px;
           background-color: greenyellow;
           position: relative;
       }

       .box3 {
           width: 100px;
           height: 100px;
           background-color: skyblue;
           position: absolute;
           left: 10px;
           top: 10px;
       }

   </style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
   <div class="box3"></div>
</div>
</body>
</html>

    结果：可以看出，box3相对于祖先元素box2的(0,0)坐标进行偏移。
    image.png

    fix 固定定位

    当元素的position属性设置fixed时，则开启了元素的固定定位。

    • 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样。不同的是：

      • 固定定位永远都会相对于浏览器窗口进行定位
      • 固定定位会固定在浏览器窗口某个位置，不会随着滚动条滚动

    3.元素的层级

    • 如果定位元素的层级是一样的，则下边的元素会覆盖上边。
    • 通过z-index属性可以用来设置元素的层级
    • 可以为z-index指定一个的值，该值将会作为当前元素的层级。层级越高，越优先显示。
    • 对于没有开启定位的元素，不能使用z-index

    举例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            position: fixed;
            left: 50px;
            top: 50px;
        }

    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

    结果：box2覆盖box1
    image.png

    若使用z-index:

            .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            z-index: 1;
        }

    结果：box1覆盖box2
    image.png

    • 父元素的层级再高，也不会盖住子元素。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            z-index: 100;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            position: fixed;
            left: 50px;
            top: 50px;
            z-index: 1;
        }

    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>

</body>
</html>

    结果：虽然box1父元素的层级数为100，大于子元素的层级数1。但是box2子元素并未覆盖box1父元素。
    image.png

    4. opacity 设置透明背景

    opacity 可以用来设置元素背景的透明。它需要一个0-1之间的值。

    * 0 表示完全透明
* 1 表示完全不透明
* 0.5 表示半透明
    • opacity属性在IE8及以下的浏览器中不支持。IE8及以下浏览器需要使用如下属性代替：

    filter: alpha(opacity=透明度)
    透明度需要一个0-100之间的值

    * 0 表示完全透明
* 100 表示完全不透明
* 50 表示半透明

    注意： 这种方式 支持IE6,但是这种效果在IE Tester中无法测试

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            z-index: 100;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            position: fixed;
            left: 50px;
            top: 50px;
            z-index: 1;
            opacity: 0.5; /*设置透明度*/
            filter：alpha(opacity=50);/*IE8及以下*/
        }

    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

    结果：由于设置了半透明，box2颜色变浅。
    image.png

    css
    shasha
    28 声望7 粉丝
    « 上一篇
    高度塌陷问题
    下一篇 »
    背景图片

    引用和评论

    推荐阅读
    头像
    day34 gulp

    shasha阅读 1.3k

    头像
    CSS Houdini：一种足以颠覆想象的 API

    王大冶赞 1阅读 902

    头像
    12个更现代化的CSS单行优化技巧

    南城FE赞 3阅读 471

    头像
    CSS---引用外部字体（一）---引入

    BigDipper阅读 1.8k

    头像
    微信小程序scroll-view中，最后一个元素右边距无效的问题

    热饭班长阅读 1.3k

    头像
    CSS---引用外部字体（二）---优化

    BigDipper阅读 859

    头像
    9个防御式的CSS代码

    史晶晶赞 1阅读 404

    0 条评论
    得票最新