理解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样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
随机推荐
- html meta标签用法详细介绍
meta是html语言head区的一个辅助性标签. 在页面中都有类似这样的html代码: <head> <meta http-equiv="content-Type&quo ...
- cursor_sharing
CURSOR_SHARING Property Description Parameter type String Syntax CURSOR_SHARING = { EXACT | FORCE } ...
- SWD模式和JTAG模式
一.功能 SWD模式:仿真 下载 JTAG模式:仿真 下载 二.接口 1.J-link JTAG/SWD接口 2.开发板接口电路 ①SWD模式 4根线(包片机) ②JTAG模式 20脚JTAG(网络) ...
- UIStackView 简单使用
UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合.对于嵌入到StackView的视图,你不用再添加自动布局的约束了.Stack View管理这些子视图的布局,并帮你自动布局约束. ...
- python url解析
>>> url="http://localhost/test.py?a=hello&b=world " >>> result=urlpa ...
- 【技术贴】webservice 调用 Transport error : 401 Error:Una
解决 webservice 调用之后报错:调用异常:Transport error : 401 Error:Unauthorized 授权失败. 加入如下代码 //Sap需要ws-security的认 ...
- Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法
一.提示标签重叠解决方法: series: [{ startAngle:90,//添加这个属性,就可以解决 type: 'pie', name: '充值方式' }] 不知道为什么,上述方法不行了.第一 ...
- iOS开发UI篇—UITableviewcell的性能问题
iOS开发UI篇—UITableviewcell的性能问题 一.UITableviewcell的一些介绍 UITableView的每一行都是一个UITableViewCell,通过dataSource ...
- [topcoder]BinaryCards
现在觉得有空时可以刷一下topcoder的DIV 2的Lvl 3的题目.感觉和刷LeetCode和WikiOi都是不一样的. http://community.topcoder.com/stat?c= ...
- [转贴] C++ 判断主机是否处于联网状态下
直接让本机访问一个网站,如果成功的话,就说明成功联网,没有访问成功,则说明没有联网!!! #include<iostream> #include <WINSOCK2.H> #p ...