position用法 

fixed的用法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            background-color: red;
            height: 48px;
            /*添加position后可以使该div与其他div处于屏幕的不同层，fixed为将该div固定到浏览器窗口的指定位置，
            top、bottom、right、left四个方位代表了离屏幕有多少距离*/
            position: fixed;
            top: 0px;
            right: 0px;
            left: 0px;
        }
        .pg-body{
            background-color: darkgray;
            height: 5000px;
            margin-top: 50px;
        }
        .pg-back_to_top {
            background-color: black;
            color: white;
            height: 50px;
            width: 50px;
            position: fixed;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="pg-header">标题</div>
    <div class="pg-body">内容</div>
    <div onclick="GoTop();" class="pg-back_to_top">返回顶部</div>
    <script>
        function GoTop(){
            console.log("123")
            document.documentElement.scrollTop = 0;
        }
    </script>
</body>
</html>
View Code

absolute和relative用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--position的relative如果单独使用，没有任何效果，因为它是自己定义自己，对div自己没有任何实际意义。
但如果这个div的内部还有div，而且这个内部的div想要定义自己相对于父div的位置，就需要在自己的position
属性添加absolute-->
    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;bottom: 0px;width: 50px;height: 50px;background-color: black"></div>
    </div>
    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;top: 0px;right: 0px;width: 50px;height: 50px;background-color: black"></div>
    </div>
    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;top: 0px;width: 50px;height: 50px;background-color: black"></div>
    </div>
</body>
</html>e
View Code

z-index属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--z-index可以设置层级页面的优先级，值越大，优先级越高，优先级高的放在最上面-->
    <div style="z-index: 10;background-color: white;position: fixed;height: 200px;width: 400px;
    top: 50%;left: 50%;margin-top: -200px;margin-left: -200px">
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
    </div>
    <div style="z-index:9;position: fixed;background-color: darkgray;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*opacity属性为设置div的透明度，值越大，背景色越深*/
    opacity: 0.5"></div>
    <div style="height: 5000px;background-color: green">第一层页面</div>
</body>
</html>
View Code

 

posted @ 2019-01-30 17:45  酷酷的狐狸  阅读(241)  评论(0)    收藏  举报