HTML 6—定位

相对定位

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*设置一个margin-left*/
            /* margin-left: 200px; */
            /*设置一个margin-top*/
            /* margin-top: 200px; */
            /*             
            定位:
                -定位指的就是将指定的元素摆放到页面的任意位置
                通过定位可以任意的摆放元素
                -通过position属性来设置元素的定 位
                -可选值:
                    static:默认值元素没有开启定位
                    relative:开启元素的相对定位
                    absolute:开启元素的绝对定位
                    fixed:开启元素的固定定位( 也是绝对定位的一种) 
                */
            /*
                当元素的position属性设置为relative时，则开启了元素的相对审位
                    1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
                    2.相对定位是相对于元素在文档流中原来的位置进行定位
                    3.相对定位的元素不会脱离文档流
                    4.相对定位会使元素提升一个层级
                    5.相对定位不会改交元素的性质，块还是缺，内联还是内联
            */
            position: relative;
            /*
                当开启了元素的定位(position属性值是一个非static的值)时，
                    可以通过left right top bottom四个属性来设置元素的偏移量
                        left:元素相对于其定位位置的左侧偏移量
                        right:元素相对于其定位位置的右侧偏移量
                        top:元素相对于其定位位置的上边的偏移量
                        bottom:素相对于其定位位置下边的偏移量
                
                通常偏移量只需要使用两个就可以对一个元素进行定位
                一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

            */
            left: 100px;
            top: 200px;


        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            /*设置一个margin-top*/
            /* margin-top: -200px; */
        }

        .s1 {
            position: relative;
            width:200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <span class="s1">我是一个span</span>

</body>

</html>

 绝对定位

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*             
                当position属性值设置为absolute时，则开启了元素的绝对定位
                绝对定位:
                    1.开启绝对定位，会使元素脱离文档流
                    2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化 
                    3.绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的(一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位)
                        如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行是位
                    4.绝对定位会使元素提升一个层级
                    5.绝对定位会改变元素的性质，
                        内联元素变成块元素，
                        块元素的宽度和高度默认都被内容撑开
            */
            position: absolute;
            /* left: 0px;
            top: 0px; */

        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }

        .box4 {
            width: 300px;
            height: 300px;
            background-color: orange;
            /*开启box4的相对定位*/
            /*position: relative;*/
        }

        .s1 {
            width: 100px;
            height: 100px;
            background-color: yel1ow;
            /*开启绝对定位*/
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box5">
        <div class="box4">
            <div class="box2"></div>
        </div>
    </div>
    <div class="box3"></div>
    <span class="s1">我是一个span</span>
</body>

</html>

 固定定位

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*
                当元素的position属性设置fixed时， 则开启了元素的固定定位
                    固定定位也是一-种绝对定位，它的大部分特点都和绝对定位一样
                不同的是: 
                    固定定位永远都会相对于浏览器窗口进行定位
                    固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
                IE6不支持固定定位
            */
            position: fixed;
            left: 0px;
            top: 0px;
        }

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

<body style="height: 5000px;">
    <div class="box1"></div>
    <div class="box4" style="width: 300px ;height: 300px;background-color: orange;">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>

</html>

 层级和opacity

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            z-index: 2;
            opacity: 0.5;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* 开启绝对定位 */
            position: absolute;
            /* 设置偏移量 */
            top: 100px;
            left: 100px;
            /* 
                如果定位元素的层级是一样，则下边的元素会盖住.上边的
                通过z-index属性可以用来设置元素的层级
                可以为Z-index指定-一个 正整数作为值，该值将会作为当前元素的层级
                层级越高，越优先显示 

                对于没有开启定位的元素不能使用Z-index

            */
            z-index: 25;
            opacity: 0.5;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            /* position: relative;
            z-index: 3; */
            position: absolute;
            top: 200px;
            left: 200px;
            z-index: 30;
            /* 
                设置元素的透明背景
                opacity可以用来设置元素背景的透明，
                    它需要一个0-1之间的值
                        0表示完全透明
                        1表示完全不透明 
            */
            opacity: 0.5;
            /* 
                opacity属性在IE8及以下的浏览器中不支持 
                IE8及以下的浏览器需要使用如下属性代替
                透明度，需要一个0- 100之间的值
                0表示完全透明
                100表示完全不透明
                50半透明

                这种方式支持IE6，但是这种效果在IE Tester中无法测试
            */
            filter: alpha(opacity=50);
        }

        .box4 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 开启相对定位 */
            position: relative;
            /* 父元素的层级再高，也不会盖住子元素 */
            z-index: 20;
            opacity: 0.5;
        }

        .box5 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* 开启绝对定位 */
            position: absolute;
            z-index: 10;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4">
        <div class="box5"></div>
    </div>
</body>

</html>

 

posted @ 2020-07-16 09:56  我等着你  阅读(169)  评论(0)    收藏  举报