position的参考基准
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的参考基准的更多相关文章
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- float与position
使用float会使块级元素的宽高表现为包裹内容(在不设定宽高的情况下) 这是当然的 我们使用float就是使几个div排在一行 当然不可能在宽度上撑满父元素啦 至于高度 不论有没有float 高 ...
- CSS3 定位| Position研究
视区(视口) 当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域).当我们调整视区大小时,UA 就有可能会改变 ...
- nmea协议
NMEA协议 信息类型为: GPGSV:可见卫星信息 GPGLL:地理定位信息 GPRMC:推荐最小定位信息 GPVTG:地面速度信息 GPGGA:GPS定位信息 GPGSA:当前卫星信息 1. Gl ...
- GPS NEMA 0183协议
转自:http://www.cnblogs.com/xidongs/archive/2011/02/01/1948689.html 一. NMEA0183标准语句(GPS常用语句)$GPGGA例:$G ...
- Unity3D 中 Generic 动画导入设置和 Root Motion 之间的关系
2条评论 Unity3D 的 Mecanim 动画系统可以直接复用 3DS MAX 中制作的动画文件中的位移,这个就是通过 applyRootMotion 来达成的,我们只需要在使用 Animator ...
- [转]结合轮廓显示,实现完整的框选目标(附Demo代码)
原地址:http://www.cnblogs.com/88999660/articles/2887078.html 几次看见有人问框选物体的做法,之前斑竹也介绍过,用画的框生成的视椎,用经典图形学的视 ...
- unity3d结合轮廓显示,实现完整的框选目标(附Demo代码)
原地址:http://dong2008hong.blog.163.com/blog/static/469688272013111554511948/ 在unity里实现,其实很简单,因为有两个前提:1 ...
- CSS 高级
1.CSS 盒模型(Box Model) 所有 HTML 元素都可以看作是盒子,在 CSS 中,“Box Model”这一术语主要是在布局时使用. CSS 盒模型(Box Model)规定了处理元素内 ...
随机推荐
- 文章推荐一个Java程序员跟大家谈谈从业心得
一个Java程序员跟大家谈谈从业心得 2017-10-21 java那些事 java那些事 java那些事 微信号 csh624366188 功能介绍 分享java开发中常用的技术,分享软件开发中各种 ...
- kuangbin专题十六 KMP&&扩展KMP POJ2406 Power Strings
Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...
- kuangbin专题七 HDU1754 I Hate It (单点修改维护最大值)
很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的询问.当然,老师有 ...
- liunx postfix与sendmail 开启与关闭
1:检查sendmail服务的状态 service sendmail status 2:开启sendmail服务 service sendmail start 3:关闭sendmail服务 servi ...
- Avito Cool Challenge 2018:D. Maximum Distance
D. Maximum Distance 题目链接:https://codeforces.com/contest/1081/problem/D 题意: 给出一个连通图以及一些特殊点,现在定义cost(u ...
- 在Pycharm上编写WordCount程序
本篇博客将给大家介绍怎么在PyCharm上编写运行WordCount程序. 第一步 下载安装PyCharm 下载Pycharm PyCharm的下载地址(Linux版本).下载完成后你将得到一个名叫: ...
- /var 目录下文件系统
/var :日志文件/var/log:各种系统日志存放地*/var/log/message :系统信息默认日志文件 (非常重要)按周自动轮循/var/log/secure :记录登入系统信息文 ...
- 转 Python-IndexError: list index out of range
https://www.cnblogs.com/2bjiujiu/p/9063864.html Error:IndexError: list index out of range Where? 对Py ...
- Dockerfile的书写规则和指令的使用方法
Dockfile是一种被Docker程序解释的脚本,Dockerfile由一条一条的指令组成,每条指令对应Linux下面的一条命令.Docker程序将这些Dockerfile指令翻译真正的Linux命 ...
- error creating bean with name 'defaultvalidator' defined in class path resource
场景: 1.直接用eclipse 运行没问题(本地用的tomcat是7.0.70): 2.打包发布到服务器运行也没问题(服务器tomcat是8.5.30): 3.将打包发布的放到本地tomcat(7. ...