一：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. MySQL与Oracle集群主从复制工具

    Oracle提供了DataGuard:MySQL提供了Group Replication,简称MGR. Oracle DataGuard的文章:http://www.cnblogs.com/adolf ...

  2. thinkphp5 速查表

    本速查表里的类都是think为命名空间的,实例化时省去了  use.用的时候注意. 本速查表里会有四种方法的调用: 公有方法 $class = new Class();  $class->foo ...

  3. 跨语言通信方案的比较—Thrift、Protobuf和Avro

    Thrift由Facebook开源的一个RPC框架,用来进行可扩展且跨语言的服务的开发,使得各种编程语言间无缝结合的.高效的服务.我们依据Thrift的规范 简单定义访问接口,通过Thrift编译器编 ...

  4. Centos中安装和配置vsftp简明教程

    一.vsftp安装篇 # 安装vsftpd yum -y install vsftpd # 启动 service vsftpd start # 开启启动 chkconfig vsftpd on 二.v ...

  5. C# 汉字排序

    转载:http://blog.csdn.net/lgx040605112/article/details/6042316 using System; using System.Globalizatio ...

  6. Git合并的代码 不提交服务器的方法

    使用Git下载代码的时候,常遇到合并的情况,然后再上传的时候,系统就会自动把合并代码的过程也上传,有时候会感觉非常的烦Merge remote-tracking branch 'choose_remo ...

  7. 使用Ubuntu的Crontab定时任务需要注意的地方

    Ubuntu使用crontab定时任务  网上有很多教程,现在记录下我遇到的一些问题,需要注意的地方: 1.定时任务的日志存放路径 网上的说法:cron的日志存放在 /var/log/cron 里面 ...

  8. NOI Linux的安装说明以及使用指南

    安装 本人的安装环境为Win10. 1. 首先从官网上下载一个CCF官方提供的Noi linux虚拟机以及安装文档 传送门 2. 然后,安装一个VMware Workstation 14 Pro,这里 ...

  9. 【CH4201】楼兰图腾

    题目大意:给定一个长度为 N 的序列,从序列中任意挑出三个数,求满足中间的数字值最小(最大)有多少种情况. 题解:建立在值域上的树状数组,从左到右扫描一遍序列,统计出每个点左边有多少个数大于(小于)该 ...

  10. 各种遍历输出（经典版）----java基础总结

    前言:关于共有3中遍历输出方式,很早之前我就想整理,无奈一直没有抽出时间,分别是传统的for循环遍历,迭代器Iterator,foreach,这次我通过测试代码,测试了一下. 先用一张草图,大概有个印 ...