理解position 绝对定位和相对定位
一、position的三种取值
1、取值
Position : static / absolute / fixed / relative
static:静态 absolute:绝对定位 fixed:固定 relative:相对定位
默认情况下:static 无特殊定位,对象遵循HTML定位规则
| absolute : | 将对象从文档流中抽出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。 |
| relative : | 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 |
| fixed : | E5.5及NS6尚不支持此 |
2、理解relative和absolute取值
(1)relative
不脱离文档流、对象不能重叠、依据left;right;top;bottom(四个至少有一个存在具体的值)等属性在正常文档流中偏移自身位置(换言之,相对于自己定位的)
(2)absolute
脱离文档流、然后使用left;right;top;bottom(四个至少有一个存在具体的值)等属性相对与其最接近的一个最有定位设置的父级对象进行绝对定位,如果父级对象没有设置定位属性,那么将遵循HTML的定位规,以body的左上角为参考进行定位、
绝对定位的对象可以重叠,层叠的顺序可以通过z-index属性进行控制,大的在上面
二、relative和absolute的区别
1、是否完全脱离了文档流
2、relative是相对于自己进行偏移定位,absolute是相对于最近具有定位设置的父级对象进行绝对定位
3、对象是否能重叠的问题(z-index改变层级关系)
【题外话】最近定位用的挺多的,例如导航菜单为了有点效果,通过相对定位让它看起来有点特别,还有一些效果,对联式的广告悬浮框、还有回到顶部等。不错不错,good good study,daydayup!
理解position 绝对定位和相对定位的更多相关文章
- css position 绝对定位和相对定位
position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...
- html 之 position 绝对定位与相对定位(待补充)
相对定位:对于区块标签而言,占着原有的空间 绝对定位:对于网页而言,不占原来的空间
- 关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)
关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录) 作者:王可利(Star·星星) HTML中 相对定位:position:relative; 绝对定位:position ...
- HTML基础--position 绝对定位 相对定位 锚点链接
position 定位属性,检索对象的定位方式 一.语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位,对象遵循HTM ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
- css绝对定位、相对定位和文档流的那些事
前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
- css中绝对定位和相对定位的区别
先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...
- css中绝对定位和相对定位详解
相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
随机推荐
- log4N配置方式
方式一. <log4net> <!-- 启动日志 --> <appender name="PayAppender" type="log4ne ...
- Servlet的一些API使用介绍
final String rootPath = getServletConfig().getServletContext().getRealPath("/"); 获取项目运行的根 ...
- asp.net MVC FileResult在IE下异常的解决办法
var encoding = System.Text.Encoding.UTF8; Response.Charset = encoding.WebName; Response.HeaderEncodi ...
- C#中通过调用Dll函数时,执行一段时间后,就会报内存可能被破坏的错的解决办法
遇到同样的问题,已经解决的:http://blog.csdn.net/youxiazzz12/article/details/24313347
- [HDOJ 5212] [BestCoder Round#39] Code 【0.0】
题目链接:HDOJ - 5212 题目分析 首先的思路是,考虑每个数对最终答案的贡献. 那么我们就要求出:对于每个数,以它为 gcd 的数对有多少对. 显然,对于一个数 x ,以它为 gcd 的两个数 ...
- 使用IRP进行文件操作
使用IRP进行文件操作 首先声明这个是菜鸟—我的学习日记,不是什么高深文章,高手们慎看. 一定要先感谢为技术的进步而付出辛勤汗水的人,感谢他们对技术的共享. 一个通用IRP访问文件的十六进制编辑器(开 ...
- Android开源项目发现---ActionBar篇(持续更新)
1. ActionBarSherlock 鼎鼎大名, 为Android所有版本提供统一的ActionBar,解决4.0以下ActionBar的适配问题 项目地址:https://github.com/ ...
- ServiceModel Metadata Utility Tool (Svcutil.exe)
https://msdn.microsoft.com/zh-cn/library/aa347733.aspx 参数: /directory:<directory> Directory to ...
- VirtualBox设置共享文件夹和镜像访问的方法
VirtualBox设置共享文件夹和镜像访问的方法 virtualBox是一款虚拟机软件,可以在该软件上安装各类的操作系统,至于如何安装请参见另外一篇经验<如何使用VirtualBox安装win ...
- Android权限Uri.parse
1,调web浏览器 Uri myBlogUri = Uri.parse("http://xxxxx.com"); returnIt = new Intent(Intent.ACTI ...