css之position

一、fixed 固定位置

　　类似于网页中返回顶部的功能，是固定在页面右下角的位置，position中fixed功能就可以让一个元素固定在相对于浏览器窗口的某个位置。

　　1.1 返回顶部

<body>
    <div onclick="GoTop()" style="width: 40px;height: 50px;background-color: red;
    position: fixed;
    bottom: 50px;
    right: 80px;"
    >返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd;"></div>

    <script>
     function GoTop(){   //返回顶部的js
         document.body.scrollTop = 0;
        }
    </script>
</body>

　　效果：

　

　　1.2 固定顶部菜单栏

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg_header {
            height: 48px;
            background-color: skyblue;
            color: red;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;

        }
        .pg_body {
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;

        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="pg_header">头部</div>
    <div class="pg_body">内容</div

　　效果：

　　

 

二、相对位置

 　　2.1 absolute  

 　　在position中fixed固定位置随着鼠标滑动，元素在浏览器上显示的位置不变。而absolute 固定位置，则是确定了元素最初在页面的位置，会随着鼠标滑动，改变在浏览器上显示的位置　

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .absolute {
            width: 50px;
            height: 50px;
            background-color: black;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="absolute"></div>
    <div style="height: 5000px;background-color: aqua;"></div>
</body>

　　效果：滑动鼠标改变位置

　　

 

 　　2.2 relative + absolute

 　　absolute 一般也不单独使用，而是会和relative结合着用，可以让一个子标签，相对于其父标签来固定位置。　

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .relative {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 1px solid red;
            position: relative;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div style="height: 5000px;background-color: #dddddd">
        <div class="relative">
            <!--固定在左下角-->
            <div style="height: 50px;width: 50px;
                        background-color: black;
                        position: absolute;
                        bottom: 0; left: 0"></div>
        </div>
        <div class="relative">
            <div style="height: 50px;width: 50px;
                        background-color: black;
                        position: absolute;
                        bottom: 0; right: 0"></div>
        </div>
        <div class="relative">
            <div style="height: 50px;width: 50px;
                        background-color: black;
                        position: absolute;
                        top: 0; left: -50px"></div>
        </div>
    </div>
</body>

　　效果：

　　

 三、多层页面　

　　

       类似于上图的效果，使用3层div元素叠加，最下面的内容页面一层，中间的灰色透明层，最外面的白色这一层。

　　实现：

　　3.1 实现下两层　

<body>
    <div style="position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: black;
     opacity: 0.5;

     "></div>
    <div style="height: 5000px; background-color: aqua"></div>
</body>

　　效果：

 　　

　　注： opacity透明度选择 0-1,数值越高透明度越低，1完全覆盖。

　　3.2 添加最外层的白色层　

<body style="margin: 0 auto">
    <div style="z-index: 10;position: fixed; height: 300px;width: 500px;background-color: white"></div>
    <div style="z-index: 9; position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: black;
     opacity: 0.5;

     "></div>
    <div style="height: 5000px; background-color: aqua"></div>
</body>

　　效果：

　　

　　注：z-index 的值越大，显示就越靠前

　　3.3 调整页面　　

<body style="margin: 0 auto">
    <div style="z-index: 10;position: fixed;
        top: 50%; left: 50%; margin-top: -200px; margin-left: -250px;
        height: 300px;width: 500px;background-color: white"></div>
    <div style="z-index: 9; position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: black;
     opacity: 0.5;

     "></div>
    <div style="height: 5000px; background-color: aqua"></div>
</body>

　　效果：

　　

 

posted @ 2018-03-08 19:25  Bigberg  阅读(270)  评论(0)    收藏  举报