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. APIO 2012 派遣(可并堆)

    APIO 2012 派遣(可并堆) 给定一棵N个点的树和M,每个点有两个权值ai,bi,每次可以选择一个点x,然后在这个点的子树中选若干点(可以不选自己),使得这些点的\(\sum b_i<=M ...

  2. jpa batch批量操作save和persist比较

    1.网上最常见的JPA----entityManager批量操作方法 private EntityManager em; @PersistenceContext(name = "Entity ...

  3. vue安装常用插件命令

    1. 安装element-ui npm i element-ui -S 2. 安装vuex npm install vuex --save 3. 安装axios npm install --save ...

  4. P3796 【模板】AC自动机

    传送门 AC自动机的模板 简单的理解就是字典树上的KMP 注意数组不要开太大 不然每次memset耗时太多 有一个小优化 每次走 fail 边找匹配时只有一些会更新答案 那么就可以把没用的fail边压 ...

  5. Centos 7.4 配置Tomcat管理员用户

    1,进入Tomcat路径下的conf文件夹 ,编辑tomcat-users.xml文件 2,在<tomcat-users>标签中增加user标签,用户名密码随便填写,roles可根据权限需 ...

  6. Vi编辑器和Vim编辑器的区别及联系

    Vi和Vim它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面,vi使用于文本编辑,但是vim更适用于coding.vim的这些优势主要体现在 ...

  7. classloader 学习

    classloader就是把类文件加载到jvm中供虚拟机使用,先看一个magic小例子: 首先,我定义一个alex/vicky包,然后在这个包内定义一个接口: public interfaceISer ...

  8. 3 不用IDE开发groovy

    1       不用IDE开发groovy 1.1  不用IDE开发的方法 可以在IDE中运行Groovy类或者脚本,但是Groovy也提供了其他运行途径.你能运行Groovy代码基于以下: ·    ...

  9. 对Vue.js的认知

    一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI ...

  10. layim和Gatewayworker组合的实时通讯

    今天是第二次重新开发使用layim和Gatewayworker,但是由于第一次没有写文档,导致这一次就跟第一次一样,一头雾水,重新开始看文档研究,导致遇到一个瓶颈,怎么都过不去.所以,以这篇文章开始, ...