原文:http://www.jb51.net/css/22786.html ,直接秒懂
如果还不懂:http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html,还可以。
定位分为如下几种!
1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析:
1、relative。定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。如图1:
图1
黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。
2、absolute。定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。如图2:
图2
可以看到,在将黄色背景层定位为absolute后,灰色背景层自动补上。
3、relative与absolute的主要区别:
首先,是上面已经提到过的在正常流中的位置存在与否。
其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式;absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层
如图3:
图3
图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:
图4
可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:
图5
除top、left、right、bottom定位外,margin属性值的定义也符合上述规则
相关推荐
实现三个led灯定位传感器位置。运用傅里叶变换,分离三种频率的灯光
开发了一个人脸识别的程序,希望可以帮到大家!!!
2、有自动定位,手动定位!手动控制有,点动一次按钮每次走设置的距离,长按则连续手动走,松开后停止! 3、本程序有工序暂停,重启功能(当按下暂停按钮工序停止,重新按下启动按钮则会按照暂停的位置继续运行!) 4...
一个学习图象处理好东西!
基于MT3331单芯片结构的高性能特性,-165dBm高跟踪灵敏度,使其在城市峡谷,树荫,高架桥这样恶劣的环境下也能定位! 25*25(mm)小尺寸高集成的封装特性使该模块易于集成到PND,移动电话,相机和车辆导航系统等...
MYCcL修正特征码定位!原版!!支持各种远程特征码定位!
默认情况下,它可以在绝对和固定的定位元素上工作,但是你可以设置一个CSS选择器来精确定位你感兴趣的元素。静态元素将被强制定位为“相对”。 使用精灵时,可以同时使用鼠标和键盘来移动背景位置。或者,双击背景将...
基于改进DV—Hop算法的无线传感器网络节点定位!!!!!!!
用于网页中,根据名称或者经纬度定位!百度地图
设置好标题,用COUNTIF和COUNTIFS分别取当天和月初累计到当天的数据:COUNTIF(交接后B仓定位!C:C,I1),COUNTIFS(交接后B仓定位!C:C,"$I$1,交接后B仓定位!C:C,">="&$H$1)。这样的话,只要每天打开表格,标题自动更新...
通过GOOGLE地图对IP进行地址定位 呵呵,通过输入IP地址,对IP地址所在地在GOOGLE地图上进行定位!
纯CSS实现跨浏览器固定定位! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
车牌定位及识别源码,希望对各位有所帮助!!!
更改完后,点击手机菜单键,保存并退出,重启手机,打开GPS,启动导航软件,10秒内定位!!! 真正有技术含量的内容 解释: NTP_SERVER=0.cn.pool.ntp.org(为中国0号授时子服务器,实时变动) NTP_SERVER=3....
可定位鼠标,记录鼠标位置,含源代码,方便划线和对其他控件进行定位!
2:利用Word工具栏或输入窗的资料库可以快速插入各种化学图形,化学图片等,其中在资料库中输入可以实现鼠标精确定位! 3:利用新增图符功能可以将Word中任意选中的部分添加到WORD工具栏,而且自动生成图标! 除此...
解决Android锁屏无法继续定位的问题,我在启动定位的时候提示了一个通知,通知的主要功能就是告诉启动了定位。锁屏后通知不会提示!!!在启动定位了之后,往本地写了一个txt文件, txt文件显示的是 “时间、经纬度...
互联网行业,重要的不全是技术,更重要的是定位,本书就是告诉你在网站开始之前,如何给网站先定位! 正所谓:重要的是,不要站错队伍了!
定位、车辆运动学、数学建模、自动驾驶初学者必备!主要讲解根据数学模型,对车轮模型纪念性几何化,实现车轮定位!