css-position属性实例1

一：position说明 

　　position

　　　　fixed 实现固定在某个位置

　　正常情况写两个div是在一层中，通过position属性，可以实现分两层和固定，就像在墙上贴了一层纸，就分了两层了。

　　postion通常结合top,left,right,bottom实现定位。

　　top:0 　　靠顶部为0

　　left:0 　　靠左边为0

　　right:0 　　靠右边为0

　　bottom:0 　　靠底部为0

 

二：postion实现返回顶部

 　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
　　
　　<!-- 实现第一个div固定在右下角-->
    <div  onclick="goTop()" style="width: 40px;height: 50px;background-color: black;color: white;position:fixed;right:20px;bottom: 0;">返回顶部</div>
    <div style="height: 5000px;background-color: #2459a2"></div>
    <script>
        function goTop(){
            document.body.scrollTop=0; //跳转顶部
        }
    </script>
</body>
</html>

 

三：postion实现顶部菜单固定

 　　问题1：position: fixed;//当这样的时候div就float起来，它就不是块，所以会出现不占全部行，通过left，right解决

　　

　　

  /*当这样的时候div就float起来，它就不是块，所以会出现不占全部行，通过left，right解决*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;

　　

 

 　　问题2：第二个div内容部分没有了，所以要设置第二个div通过margin-top离顶部48px;

　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color:white;
            /*当这样的时候div就float起来，它就不是块，所以会出现不占全部行，通过left，right解决*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
        .pg-body{

            margin-top: 50px;
            background-color: #ff18a4;
            height: 5000px;

        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>

 

 

　

posted on 2017-09-17 20:54  shisanjun  阅读(128)  评论(0)  编辑  收藏  举报

导航