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>

 

posted @ 2018-09-21 15:57  苦瓜爆炒牛肉  阅读(13621)  评论(0)  编辑  收藏  举报