理解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样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
随机推荐
- memcached-win32-1.4.4-14 help doc
memcached-win32-1.4.4-14 cmd打开命令窗口,转到解压的目录,输入 “memcached.exe -d install”. 使用telnet命令 验证缓存服务器是否可用.tel ...
- 第 3 章 单例模式【Singleton Pattern】
以下内容出自:24种设计模式介绍与6大设计原则 这个模式是很有意思,而且比较简单,但是我还是要说因为它使用的是如此的广泛,如此的有人缘,单例就是单一.独苗的意思,那什么是独一份呢?你的思维是独一份,除 ...
- python中enumerate的使用
在python的应用中,当我们使用一个数组或者列表的时候既要遍历索引又要遍历元素的时候通常的做法是这样的: >>> lsi = [1,2,3,4,5,6,7,8,9] >> ...
- nodejs对静态文件目录的处理
Serving static files in Express To serve static files such as images, CSS files, and JavaScript file ...
- CISCO2691的OSPF点对点密文测评测试
都差不多,粘一个文件就能说明问题了. Router#show run Building configuration... Current configuration : bytes ! version ...
- JavaSE 国际化 简单例子
①在src下添加两个文件: base_zh_CN.properties Test=\u8fd9\u662f\u4e2d\u6587 base_en_US.properties Test=english ...
- Intellij IDEA快速编写代码经验总结
sout=System.out.println(); soutp=System.out.println(""); soutv=System.out.println("变量 ...
- jBPM 4.4 数据库设计
1 存储流程定义相关的部署信息数据库 1.1 jbpm4_deployment 字段名 字段含义 类型 允许空值 键 DBID_ 流程模板标识 Bigint( ...
- JavaScript实现网页背景自动变色
JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值.一定时间内自动切换网页背景颜色. <!DOCTYPE HTML PUBLIC "-//W ...
- centos 6.4 大容量磁盘分区步骤
首先安装分区工具 yum install parted 假设需要分区的设备为/dev/sdb 运行如下命令 parted /dev/sdb (parted) mklabel gpt #大于2TB的磁盘 ...