HTML定位

定位

position属性可以控制Web浏览器如何以及在何处显示特定的元素。
可以使用position属性把一个元素放置到网页中的任何位置。
可选值：
static（默认）
relative（相对）
absolute（绝对）
fixed（固定）

相对定位relative

每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。
当将position属性设置为relative时，则开启了元素的相对定位。
当开启了相对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位

特点

如果不设置元素的偏移量，元素位置不会发生改变。
相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
相对定位不会改变元素原来的特性。
相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        .box1{
            height: 200px;
            background-color: red;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*
            定位：
                - 定位指的就是将指定的元素摆放到页面的任意位置
                    通过定位可以任意的摆放元素
                - 通过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;
        }

        .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>

绝对定位absolute

绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。
当将position属性设置为absolute时，则开启了元素的绝对定位。
当开启了绝对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。

绝对定位的特点

绝对定位会使元素完全脱离文本流。
绝对定位的块元素的宽度会被其内容撑开。
绝对定位会使行内元素变成块元素。
一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。


<!DOCTYPE html>
<html lang="en">
<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: 100px;
            top: 100px;*/
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
        .box4{
            width: 300px;
            height: 300px;
            background-color: orange;
            /*开启box4的相对定位*/
            /*position: relative;*/
        }
        .s1{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*开启绝对定位*/
            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>

固定定位fixed

固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。
当将position属性设置为fixed时，则开启了元素的固定定位。
当开启了固定定位以后，可以使用top、right、
bottom、left四个属性对元素进行定位。
固定定位的其他特性和绝对定位类似。
对当前窗口进行定位（四个角）


<!DOCTYPE html>
<html lang="en">
<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; position: relative;">
        <div class="box2"></div>
    </div>

    <div class="box3"></div>
</body>
</html>

z-index层级

当元素开启定位以后就可以设置z-index这个属性。
这个属性可以提升定位元素所在的层级。
z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index 值较大的元素会显示在网页的最上层。
父元素的层级再高，也不会盖住子元素


<!DOCTYPE html>
<html lang="en">
<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;
            filter: alpha(opacity=50);
        }
        .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;
            filter: alpha(opacity=50);
        }
        .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 表示完全不透明
                0.5 表示半透明
            */
            opacity: 0.5;

            /*
            opacity属性在IE8及以下的浏览器中不支持
            IE8及以下的浏览器需要使用如下属性代替
                alpha(opacity=透明度)
            透明度，需要一个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;

            top: 500px;
        }
        .box5{
            width: 100px;
            height: 100px;
            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>

HTML定位

定位

相对定位relative

特点

绝对定位absolute

绝对定位的特点

固定定位fixed

z-index层级

推荐阅读更多精彩内容