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. Shell---自动测试局域网内的网络连通情况

    #!/bin/bash );do RE=`ping .$i` echo $RE >>result.log done

  2. cron定时备份数据库

    1.定时备份数据库 shell 脚本 #!/bin/bash # export and backup the abgent_web database.sql mysqldump -uusername ...

  3. (vue.js)import "mint-ui/lib/stylecss"失败

    在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css ...

  4. tomcat8性能优化

    在tomcat/catalina.sh中加入下面的配置,内存要根据机器实际情况配置,如果配置内存太大了有可能机器很慢. JAVA_OPTS="-server -Xms512m -Xmx512 ...

  5. Java Applet 素数小程序

    en... 1. Applet 这个远古的东西,今天我同学让我帮他看看代码,说applet运行出错.额,反正闲着也是闲着,看看呗 ,结果看到代码...4 2.就是实现这破玩意 package calc ...

  6. C语言ctype.h字符函数和字符串

    ctype.h存的是与字符相关的函数: 这些函数虽然不能处理整个字符串,但是可以处理字符串中的字符: ToUpper()函数,利用toupper()函数处理字符串中的每个字符,转换成大写: Punct ...

  7. ARM,CPU相关概念

    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 相关链接: ARM内核和架构都是什么意思,它们到底是什么关系?:ht ...

  8. C#空接合操作符——??

    操作符: ?? 用法:C = A ?? B; 解释:if(A != null){ C=A;} else{C=B}     类似三元运算符 :? 例子: Int32? num1=null; Int32? ...

  9. HDU计算机学院大学生程序设计竞赛(2015’12)The Magic Tower

    Problem Description Like most of the RPG (role play game), “The Magic Tower” is a game about how a w ...

  10. 服务器报nginx: [warn] conflicting server name "blog.xueyi.com" on 0.0.0.0:80, ignored

    nginx: [warn] conflicting server name "blog.xueyi.com" on 0.0.0.0:80, ignored 修改nginx配置参数后 ...