position定位

position

通过该属性可以将元素摆放到页面的任意位置。static/relative/absolute/fixed

当relative的值为非static时，可以通过left/right/top/bottom来设置元素的偏移量。如left为元素相对于其定位位置的左边距

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

当开启了元素的相对定位而不设置偏移量时，元素不会有任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流，但是会使元素提升一个层级，即盖住其他元素
相对定位不会改变元素的性质，块级元素还是块级元素，内联元素还是内联元素

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: yellow;
            left: 100px;
            top: 100px;

        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>

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

开启绝对定位会使元素脱离文档流，并且会使该元素提升一个层级
开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化。但是该元素下面的元素会上去
绝对定位是相对于离他最近的开启了position的祖先元素进行定位的(一般，开启了子元素的绝对定位都会同时开启父元素的相对定位，可以理解为对相对定位的元素进行绝对定位)
绝对定位会改变元素的性质，内联元素变成块级元素，块级元素的width和height默认被content撑开

<body>
    <div class="box1"></div>
    <div class="box4">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* 原点位置 top,left都为0*/
            top: 0;
            left: 300px;

        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .box4 {
            /* 在父元素中开启相对定位，方便子元素绝对定位。如果不设置，则子元素绝对定位的原点为屏幕左上角 */
            position: relative;
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>

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

固定定位是一种特殊的绝对定位，它的大部分特点都和绝对定位一样

不同的是：

固定定位永远都会相对于浏览器窗口进行定位，即原点在屏幕左上角
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
IE6不支持固定定位，需要相应的js来实现

<!-- 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动 -->
<body style="width: 5000px;">
    <div class="box1"></div>
    <div class="box4">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            position: fixed;
            width: 200px;
            height: 200px;
            background-color: yellow;
            top: 300px;
            left: 300px;

        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .box4 {
            /* 即使父元素设置了relative，fixed原点仍然是左上角 */
            position: relative;
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>

元素的层级：

如果定位元素的层级一样，则下边（从结构上）的元素将会盖住上边的。如第二个div盖住第一个div，第三个div盖住第二个div

通过z-index属性可以在开启position的元素设置层级，指定一个正整数的值，值越大，层级越高，越优先显示

父级的层级再高，也不会盖住子元素

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4">
        <div class="box5"></div>
    </div>
    <style>
        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: yellow;
            left: 100px;
            top: 100px;
            z-index: 1;

        }

        .box3 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .box4 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 父元素的z-index再大，也不会盖住子元素 */
            z-index: 999;
        }
        .box5 {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: pink;
        }
    </style>

设置元素的透明度

opacity，一个0~1之间的值，0表示完全透明，1表示完全不透明，0.5表示半透明

opacity属性在IE8及以下的浏览器中不支持，需要使用alpha(opacity=透明度)，其中透明度为一个0~100之间的值，0表示完全透明

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <style>
        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .box2 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: yellow;
            left: 100px;
            top: 100px;
            z-index: 1;
            opacity: 0.5;
            filter: alpha(opacity=50);

        }

        .box3 {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            left: 200px;
            bottom: 30px;
            z-index: 2;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
    </style>

View Code

posted @ 2020-04-05 00:06 ajjoker 阅读(167) 评论(0) 收藏举报

刷新页面返回顶部

ajjoker

position定位

公告