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. 【转】.net算术运算导致溢出

    源地址:http://blog.csdn.net/hawksoft/article/details/70470136

  2. poj2406 Power Strings(kmp)

    poj2406 Power Strings(kmp) 给出一个字符串,问这个字符串是一个字符串重复几次.要求最大化重复次数. 若当前字符串为S,用kmp匹配'\0'+S和S即可. #include & ...

  3. Spring IOC机制之使用注解配置bean

    一. 通过注解配置bean 1.1       概述 相对于XML方式而言,通过注解的方式配置bean更加简洁和优雅,而且和MVC组件化开发的理念十分契合,是开发中常用的使用方式. 1.2       ...

  4. 一些意想不到的小bug。

    一,当if的时候,很容易忘记相对的else,从而出现bug,要将背面消息考虑全面. 二,多个元素在同一行布局的时候,要考虑文字的换行还是省略号代替. 例如:左边一个文字,宽度不固定,右边一个图形,宽度 ...

  5. 《图解HTTP》阅读笔记--第四章--HTTP状态码

    第四章.返回结果的HTTP状态码前言:状态码的职责是告诉用户服务器端描述返回的请求,以便用户判断服务器处理是否正常. 状态码由三位数字和原因短语组成,其中三位数字的首位指定了响应类别:---1xx 接 ...

  6. [转载]np.where()使用说明

    转载自https://www.cnblogs.com/massquantity/p/8908859.html#4072620 numpy.where() 有两种用法: 1. np.where(cond ...

  7. dedecms中模板函数

    下面来解说下DEDECMS织梦CMS模板里面的函数说明 在文件include/inc_function.php里面 1 2 GetCurUrl() 获贴切前的脚本的URL 1 2 GetAlabNum ...

  8. Jenkins自动化CI CD流水线之2--用户权限管理

    一. 背景 针对开发.运维.测试针对不同角色进行不同权限划分, 基于插件: Role-based Authorization Strategy来实现. 一. 安装 安装该插件: 系统管理->管理 ...

  9. 创建Banner

    org.springframework.boot.SpringApplicationBannerPrinter#print(org.springframework.core.env.Environme ...

  10. 基于Visual Studio .NET2015的单元测试 OpenCover

    https://www.cnblogs.com/XiaoRuLiang/p/10095723.html 基于Visual Studio .NET2015的单元测试 1.    在Visual Stud ...