html中的定位与层级设置

#转载请先留言联系

定位

HTML中的position属性可以对元素进行定位，通过position的不同的值，可以配合方位属性，让元素显示页面中的任何一个位置。

position有四个值：

static，默认值，去除元素的定位。也就是不进行定位

relative，相对定位，元素相对于自身原来的位置进行定位。

absolute，绝对定位，元素相对于当前父元素进行定位。

fixed，固定定位，元素相对于浏览器页面窗口进行定位。

怎么定位？css中提供了四个不同方位属性给我们进行定位。

top：表示距离顶部指定的长度

bottom:表示距离底部指定的长度

left：表示距离左边指定的长度

right：表示距离右边指定的长度

示例：

1.relative定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width:200px;

            height: 200px;

            background: #000;

            position: relative;

            /*让元素相对于自身原有的位置进行定位*/

            top:100px; /*向下移动100px*/

            left: 100px; /*向左移动100px*/

            /*定位中，left与right,top与bottom一般不同时使用*/

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>;

2.absolute定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 500px;

            height: 500px;

            background: blue;

            position: absolute;

            top: 100px;

            left: 100px;

        }

        .son{

            width: 100px;

            height: 100px;

            background: black;

            position: absolute;

            top: 200px;

            left: 200px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="son"></div>

    </div>

</body>

</html>

absolute定位有一个很常用的用途，就是当希望子元素在父元素的正中央时，可以这样操作：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 500px;

            height: 500px;

            background: blue;

            position: absolute;

            top: 100px;

            left: 100px;

        }

        .son{

            width: 100px;

            height: 100px;

            background: black;

            position: absolute;

            left: 0;  /* 注意不要漏了上下左右为0，否则不会成功 */

            right: 0;

            top: 0;

            bottom: 0;

            margin: auto;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="son"></div>

    </div>

</body>

</html>

3.fixed定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .one{

            width: 100px;

            height: 300px;

            background: blue;

            position: fixed;

            right: 0;

            top: 300px;

        }

        .two{

            width: 100px;

            height: 300px;

            background: blue;

            position: fixed;

            left: 0;

            top: 300px;

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

</body>

</html>

设置了定位后可以设置层级。

层级

通过z-index进行设置，所有的元素的z-index默认值为0，我们可以通过z-index，设置不同的值来控制定位元素之间的覆盖。值越大的，层级越高，值越小，层级就越低，如果定位元素的层级为-1，则会被普通没有定位的元素进行覆盖。

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .one{

            width: 100px;

            height: 200px;

            background: red;

            position: absolute;

        }

        .two{

            width: 100px;

            height: 100px;

            background: yellow;

            position: absolute;

            z-index: 1;

        }

        .three{

            width: 100px;

            height: 300px;

            background: blue;

            position: absolute;

            z-index: -2;

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

</body>

</html>

巴特西

html中的定位与层级设置

定位

层级

最新文章

热门文章