一：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>

　

css-position属性实例1的更多相关文章

  1. 【转载】CSS position属性和实例应用

    目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...

  2. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  3. 详解CSS position属性

    原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...

  4. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  5. CSS position 属性

    position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...

  6. CSS position 属性_css中常用position定位属性介绍

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...

  7. css position属性

    absolute, 屏幕为参照, 但固定在页面上,随页面滚动而动. fixed, 父元素没有指定position属性(或position属性为static时)==>屏幕为参照,固定在屏幕的某个位 ...

  8. CSS position属性 标签： css 2016-09-06 15:58 78人阅读 评论(0) 收藏

    踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...

  9. CSS position属性---absolute与relative

    详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html

  10. CSS - position属性小结

    Relative: 属于文档流,针对自身进行偏移: Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移: Fixed: 和absolute基本一 ...

随机推荐

  1. PAT 甲级 1051 Pop Sequence

    https://pintia.cn/problem-sets/994805342720868352/problems/994805427332562944 Given a stack which ca ...

  2. git 客户端连接gitlab 实现简单的CI/CD

    1. git 客户端的安装 下载: https://git-scm.com/download/win 截至最近:20180728最新版本 2.18的下载地址 https://github-produc ...

  3. PHP4个载入语句的区别

    4个载入语句的区别 include和require的区别: include载入文件失败时(即没有找到该文件),报一个“提示错误”,然后继续执行后续代码: requre载入文件失败时,报错并立即终止执行 ...

  4. 【转】maven常用插件介绍

    我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...

  5. SQLServer将一个表的数据导入到另一个表

    1.假如A表存在 insert into A(a,b,c) (select a,b,c from B) 2.假如A表不存在 select a,b,c into A from B 3.假如需要跨数据库 ...

  6. noip2017颓废记

    作为一个从初中就开始学信息的蒟蒻,自然要去提高组了~~~ 比赛前day1 跟平常一样在机房颓废着,上午在洛谷看到了站长大人的忠告后,看了看模板题,发现没几个会打的(正常). 下午想一想发现自己的dp垃 ...

  7. emoji表情与unicode编码互转(JS,JAVA,C#)

    1.表情字符转编码 [C#] Encoding.UTF32.GetBytes("

  8. IOI2018题解

    只有部分题解 练习赛 T2 自然还是要简单考虑了 0~n-1的排列,考虑相对的大小 我们先考虑对于前三个:a,b,c 询问a,b,询问b,c,再询问a,b,c 发现,如果三个知道两个,那么第三个可以唯 ...

  9. java 7 升级后，控制面板里找不到java图标了

    如果电脑里只装了jre的情况下,好像从java 7 update 9开始,通过java自动升级程序完成升级后,控制面板里的java图标就不见了. 只好重新从java.sun.com上下载最新版的jre ...

  10. 在Linux中以普通用户开机自动运行脚本程序

    测试环境:CentOS6.5 管理员:root 普通用户:test1 实现目标:在Linux启动时,以普通用户test1自动运行位于根目录下的脚本程序test.py,该程序会在每次执行时自动向本地日志 ...