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. SpringBoot dubbo之class is not visible from class loader

    使用了两个类加载器加载了同一个类,区分一个Class对象是否相等要看包名+类名,也要看是否是同一个类加载器 方案一,排查掉spring-boot-devtools模块的maven引入可以解决,这时候所 ...

  2. Shell脚本标准

    #!/bin/bash #Usage: # ./shell.sh dbname user passwd #----------------------------------------------- ...

  3. P2115 [USACO14MAR]破坏Sabotage

    题意:给你一个正整数序列,让你删去一段区间内的数[l,r] $1<l\le r <n$ 使得剩余的数平均值最小$n\le 10^5$ 1.不难想到暴力,用前缀和优化$O(n^2)$ #in ...

  4. [Maven]How do I tell Maven to use the latest version of a dependency?

    Link: http://stackoverflow.com/questions/30571/how-do-i-tell-maven-to-use-the-latest-version-of-a-de ...

  5. [ZJOI2014]力(FFT)

    [Luogu3338] [BZOJ5327] (DarkBZOJ数据有问题) \(19.3.8\) 前置知识:[知乎-如何通俗易懂地解释卷积] [FFT详解] \(1.\)卷积定义 我们称 \((f* ...

  6. day28 socketserver

    1.    socketserver  多线程用的 例 import socket import time client=socket.socket() client.connect(("1 ...

  7. lnmp 架构

    Mysql安装 tar zxf mysql-boost-5.7.17.tar.gz yum install -y gcc gcc-c++ yum install cmake-2.8.12.2-4.el ...

  8. JavaScript trim 实现去除字符串首尾指定字符的简单方法

    String.prototype.trim = function (char, type) { if (char) { if (type == 'left') { return this.replac ...

  9. hive 存储格式及压缩

    -- 设置参数 set hivevar:target_db_name=db_dw; use ${hivevar:target_db_name}; -- 创建textfile表 create table ...

  10. pip 安装库的时候使用豆瓣镜像 提升效率

    由于众所周知的原因,国内网络环境始终处于水深火热之中,python库的安装也不例外. 比如在安装 PyQt5-tools 的时候,网速奇慢无比. 好在国内有不少镜像服务源,以豆瓣为例,网速突飞猛进 使 ...