理解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样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
随机推荐
- 重构技巧 引入Null对象
描述:有两个类,学生类和导师类,学生的导师类可能不存在,因此在获取学生导师名字等信息时都要先判断导师名字是否为空.重构后通过一个空导师类来处理导师为空的相应逻辑. Before # introduce ...
- Qt之json解析
Jsoner::Jsoner(QObject *parent) : QObject(parent){ QJsonObject json; json.insert("loginna ...
- 聊聊Web App、Hybrid App与Native App的设计差异
目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...
- 结缘PDO
起因 一直没有注意看数据库相关知识 几个月之前,无意打开如下一段代码: 被人吐槽是N年前的写法.后来也是学习需要,单一mysql已经不合适了.于是上网搜了一下好方法,PDO迎面而来. 诱惑 上网浏览时 ...
- JAVA 反射特性
1. 反射(概念):程序在运行期可以改变程序结构和变量类型,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力. 2. 反射的特性: •在运行时判断任意一个对象所属的类 •在运行时构造 ...
- hdu 4445
今天模拟了一场去年金华的现场赛: 我和小珺两人出了5个题,感觉还可以: 不过这次的题目确实比较简单: 这个题目感觉不错,不难,以前见过用这种方法的,但一直没写过: 这次写下练练手: 思路,将角度分成1 ...
- Java RMI远程方法调用
RMI(远程接口调用) 1. RMI的原理: RMI系统结构,在客户端和服务器端都有几层结构. 方法调用从客户对象经占位程序(Stub).远程引用层(Remote Reference Layer)和传 ...
- selectpicker下拉多选框ajax异步或者提前赋值=》默认值
Bootstrap select多选下拉框赋值 success: function (data) { var oldnumber = new Array(); $.each(data, functio ...
- IronPython 源码剖析系列(2):IronPython 引擎的运作流程
http://blog.csdn.net/inelm/article/details/4612987 一.入口点 Python 程序的执行是从 hosting 程序 ipy.exe 开始的,而他的入口 ...
- 透过表象看本质!?之二——除了最小p乘,还有PCA
如图1所示,最小p乘法求得是,而真实值到拟合曲线的距离为.那么,对应的是什么样的数据分析呢? 图1 最小p乘法的使用的误差是.真实值到拟合曲线的距离为 假如存在拟合曲线,设直线方程为.真实值到该曲线的 ...