static（静态）：position默认的样式；占据标准流的位置, 它会忽略top、bottom、left 、 right 的设置

relative（相对）: 占据标准流的位置；可将其移至相对于其正常标准流的位置

absolute（绝对）: 参考基准是距离它最近的设置了position: relative;的父级元素；可通过 “left”、”top”、”right”、 “bottom” 的属性值来规定它所处的位置；父元素的内容区（即content（width+height）+padding区域，不包括border和margin）；

　　　　　　　　子元素定位的边界是子元素的整体 = margin + border + padding + content ;以margin的外边界为基准进行定位；父元素没有设置position: relative则以body为基准进行定位

fixed（固定） :参考基准是浏览器窗口，无论窗口滚动与否，元素都会固定在当前页面的设置位置（常用举例：弹窗的设置）；

position的参考基准的更多相关文章

  1. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  2. float与position

    使用float会使块级元素的宽高表现为包裹内容(在不设定宽高的情况下)  这是当然的  我们使用float就是使几个div排在一行 当然不可能在宽度上撑满父元素啦  至于高度 不论有没有float 高 ...

  3. CSS3 定位| Position研究

    视区(视口) 当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域).当我们调整视区大小时,UA 就有可能会改变 ...

  4. nmea协议

    NMEA协议 信息类型为: GPGSV:可见卫星信息 GPGLL:地理定位信息 GPRMC:推荐最小定位信息 GPVTG:地面速度信息 GPGGA:GPS定位信息 GPGSA:当前卫星信息 1. Gl ...

  5. GPS NEMA 0183协议

    转自:http://www.cnblogs.com/xidongs/archive/2011/02/01/1948689.html 一. NMEA0183标准语句(GPS常用语句)$GPGGA例:$G ...

  6. Unity3D 中 Generic 动画导入设置和 Root Motion 之间的关系

    2条评论 Unity3D 的 Mecanim 动画系统可以直接复用 3DS MAX 中制作的动画文件中的位移,这个就是通过 applyRootMotion 来达成的,我们只需要在使用 Animator ...

  7. [转]结合轮廓显示，实现完整的框选目标(附Demo代码)

    原地址:http://www.cnblogs.com/88999660/articles/2887078.html 几次看见有人问框选物体的做法,之前斑竹也介绍过,用画的框生成的视椎,用经典图形学的视 ...

  8. unity3d结合轮廓显示，实现完整的框选目标(附Demo代码)

    原地址:http://dong2008hong.blog.163.com/blog/static/469688272013111554511948/ 在unity里实现,其实很简单,因为有两个前提:1 ...

  9. CSS 高级

    1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内 ...

随机推荐

  1. ASP SQLDATASOURCE

    原文链接:http://blog.csdn.net/dodream/article/details/4887076

  2. 「杂录」CQOI 2018 背板记

    背景 经过一天天的等待,终于迎来了\(CQOI2018\),想想\(NOIp\)过后到现在,已经有了快要半年了,曾经遥遥无期,没想到时间一转眼就过去了-- 日志 \(Day0\) 因为明天就要考试了, ...

  3. SPI 实现原理及运用

    SPI原理 SPI的全名为Service Provider Interface.大多数开发人员可能不熟悉,因为这个是针对厂商或者插件的.在java.util.ServiceLoader的文档里有比较详 ...

  4. 【Leetcode】Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  5. [NodeJS]exit code

    NodeJs 如何返回exit Code code =1; process.emit("exit ") process.reallyExit(code);

  6. python 批量修改包名

    #coding=utf-8 import os #import re # 设置编码为utf-8 否则会报错..这时候 sublime控制台会报乱码.但是别担心,utf-8 文件 并不会报错 impor ...

  7. gradle 使用本地maven 仓库 和 提交代码到maven

    /* * This build file was generated by the Gradle 'init' task. * * This generated file contains a sam ...

  8. 关于pycharm使用sqlite数据可视化的使用

    如图

  9. 修改阿里云ESC Centos 7.4 防火墙开放端口

    例如系统:Centos 7.4操作如下 1,进入 cd /etc/firewalld/zones/ 目录 2,编辑 vim public.xml 3,按i或insert键进入编辑模式 4,在<z ...

  10. centos7安装与卸载软件

    安装 yum install 服务名 查看服务名 rpm -qa |grep -i aerospike 或者 yum list installed | grep aerospike 卸载 yum re ...