转载出处

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。

定位的定义:
在CSS中关于定位的内容是:
position:relative | absolute | static | fixed
static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。 relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。 absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。 fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。 : CSS中定位的层叠分级:z-index: auto | namber;
auto 遵从其父对象的定位 namber 无单位的整数值。可为负数
定位的原理:
1.可以位移的元素 (相对定位)
  在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,也可以通过margin来让元素产生位置移动。但事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分使用。)针对一个相对定位的元素所产生的。我们看下面的图: 
我们看图中是一个相对定位的元素
#first { width:200px; height: 50px; margin:25px; border:25px solid #333; padding:25px; position:relative; top: 50px; left: 50px; }
而下方是一块默认定位的黑色区块
#second {
width:400px;
height:75px;
margin:0;
border:0;
padding:0;
backgroud-color:#333;
}
我们看到这个处在文本流的区块被上面的相对定位挡住了一部分,这说明:“当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值。并且我们发现当相对定位元素进行位移后,表现内容已经脱离了文本流,只是在本文流中还为原来的相对对定位留下了原有的总宽与总高(内容的高度或是宽度加上 margin\border\padding的数值)。这说明在相对定位中,虽然表现区脱离了原来的文本流,但是在文本流中还还有此相对定位的老窩。这点要特别注意,因为在实际应用中如果相对定位的位移数值过大,那么原有的区域就会形成一块空白。
并且我们注意,定位元素的坐标点是在margin值的左上边缘点,即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。
2.可以在任意一个位置的元素(绝对定位)
如上所述:相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。看下图:
上图可知,文本流中的内容会顶替绝对定位无素的位置,一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中,定位元素将会跑到网页的左上角,因为那里是他们的被绝对定位后的坐标原点。
3.被关联的绝对定位
上面说的是单一的绝对定位,而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性,但是又希望绝对定位的坐标原点可以固定在网页中的某一个点,当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动,而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。
虽然是如此,但是这个坐标原点却并不是父级的坐标原点,这是一个很奇怪的坐标位置。我们看一下模型图示:

我们看到,这个图中父级为黑灰色区块,子级为青色区块。父级是相对定位,子级是绝对定位。子级设置了顶部位移50个像素,左倾位移50个像素。那么我们看,子级的坐标原点并不是从父级的坐标原点位移50个像素,而是从父级块的padding左上边缘点为坐标起始点(即A 点)。而父级这里如果要产生位置移动,或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整数值。

这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话,相信看完对这里对定位的解释一定可以把定位使用得随心所欲。

4.总在视线里的元素 (固定定位)

position:fixed; 他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。

另一种容易懂的解释:

先说说我这篇教程的思路,这对于你在正真开始阅教程前是有很大帮助的。我的思路是这样的:先给出定位较专 业化精炼的解释,接下来再用打比如的方法形象地介绍它们,此时大家要和前面讲到的专业解释对比阅读。介绍完理论,将通过实例来介绍定位的各知识点,虽然实 例不美,但每一则实例都是精心挑选的,如果要完整掌握DIV+CSS定位方法,请务必弄懂每一个实例的原理。最后将会带大家做一个较为酷的综合实例。如果 你想提高你阅读本文的兴趣或者动力,你可以先跳到最后看综合实例的运行效果。

  1.定位的专业解释

  (1)语法

  position:static|absolute|fixed|relative

  (2)说明

  从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(absolute),固定(fixed),相对定位 (relative)。在这个教程里,我不逐一讲,只讲最常用也是最实用的两个定位方法:绝对定位(absolute)、相对定位(relative)。

  绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接 近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据body对象左上角作为参考进行定 位。绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。

  相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

  2.定位的形象解释

  我先来架设一个虚拟的场景:有一个矩形的房间,里面还有一个水桶装了些水,水里还浸泡着一个西瓜,这个房间半空中还有不少的钩子用于挂东西用。 现在我把网页元素与上面物件对应上,那么房间就是一个网页,水桶是网页中的一个板块,桶中的水就是文本流,西瓜就是将要被定位的对象。

  (1)贡献的绝对定位(absolute)

  对照前面解释,如果西瓜被赋予绝对定位,那么就等于把西瓜从水中捞起来挂在半空中的钩子上,水桶中西瓜原来占用的空间水会自动填补它(绝对定位 对象会让出自己原先占用位置,所以说它是贡献的)。此时如果之前没有对水桶进行定位设定,那么被拿起的西瓜位置不会再受水桶位置影响,水桶怎么移动,西瓜 还是挂在原来位置,至于西瓜要怎放,则以房间左上角(body左上角)为准,用left,right,top,bottom值来定位。

  但是如果水桶也给出了定位设置(通常是相对定位,下面有讲到这一实用技巧),此时西瓜的摆放就没有那么自由了,尽管此时西瓜被拿起来了不会影响 水桶中的水(文本流),但它还是要听桶的话,桶会告诉西瓜“你可以活动,但应该在我的范围内走动,比方说我要你在我左上方1米处,你就要跟死这一点,我走 你也要跟着走”,如果桶中有很多个西瓜,可以全部拿出来吊到半空中,它们将被安排在不同高度的空间(层),所以在房顶垂直往下看,有可能看到不同西瓜层叠 在一起的情况(这个所谓的高度在网页中是不存在的,就像FLASH动画中的不同层上安排了元素,但它们在看时不会有深度感觉)。可见绝对定位的对象参考目 标是它的父级,专业称之为包含块。

  (2)自私的相对定位(relative)

  相对定位一个最大特点是:自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象。相对定位也比较独立,做什么事它自己 说了算,要定位的时候,它是以自己本身所在位置偏移的(相对对象本身偏移)。再拿前边作比如来解,那么此时西瓜似乎是有魔法的,如果西瓜通过相对定位在水 桶中偏移了你会看到一个现实生活中不存在的现象:水中有一个地方水凹下去了,周围的水不能填补它,西瓜看起来在旁边,如果搅动一下桶中的水,那个凹的位置 会发现改变(文本流对相对定位对象还存在影响),但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响,因为对象并没有真正脱离文本 流,就像有两个人在同一层楼水平移动的过程中会有碰头的机会。

  (3)总结两种定位的特征

  绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层,我们这里理解为文本流就放在首层),它们互不影响,但是它们怎么移动与你楼的地基和面积(父级)有关。相对定位指对象还是在首层楼与文本流一起存放,它们之间肯定存在影响。

  (4)对特殊情况的补充

  在用相对定位和绝对定位的时候,有一种情况是它们的定位值用到了负值则对象可沿相反方向移动,刚才说到的把对象安排在一栋楼的不同层,如果某个 对象一开始就是背靠着最外边墙的,此时再用一个负值定位它,它就会神奇般地跑出墙外去了,当然现实中可没有这种惊险而又神奇的事发生,本人只为了延用上面 的比如作形象解释。

HTML定位简介的更多相关文章

  1. UIAutomator定位简介

    UIAutomator元素定位是 Android 系统原生支持的定位方式,虽然与 xpath 类似,但比它更加好用,且支持元素全部属性定位.定位原理是通过android 自带的android uiau ...

  2. GPS定位学习笔记

    ********************************* GPS定位简介 ********************************** 1. iOS SDK提供两个框架来实现位置服务 ...

  3. sql优化 性能快速定位

    sql server sql性能快速定位 简介 对于写出实现功能的SQL语句和既能实现功能又能保证性能的SQL语句的差别是巨大的.很多时候开发人员仅仅是把精力放在实现所需的功能上,而忽略了其所写代码的 ...

  4. Web前端教程2-CSS教程

    目录 1. CSS基本语法 1.1. CSS基本定义 1.2. CSS布局属性 1.3. CSS文本常用属性 2.CSS选择器 2.1. 标签选择器 2.2. id选择器 2.3. 类选择器 2.4. ...

  5. ios 学习路线总结

    学习方法 面对有难度的功能,不要忙着拒绝,而是挑战一下,学习更多知识. 尽量独立解决问题,而不是在遇到问题的第一想法是找人. 多学习别人开源的第三方库,能够开源的库一定有值得学习的地方,多去看别的大神 ...

  6. 百度Apollo无人驾驶入门课程下载

    本文提供 百度Apollo官网的无人驾驶入门课程下载,主要为视频文件. 视频数量:101个:文件格式:MP4:视频总时长:2小时40分钟:文件总大小:约1.13GB: 马上下载 关注公众号罗孚传说(R ...

  7. 18年selenium3+python3+unittest自动化测试教程(上)

    第一章 自动化测试课程介绍和课程大纲 1.自动化测试课程介绍 简介:讲解什么是自动化测试和课程大纲讲解,课程需要的基础和学后的水平 python3.7+selenium3 pycharm 第二章自动化 ...

  8. web前端学习总结--CSS

    CSS 什么是CSS? CSS 指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 如何使用CSS 内联方式 样式定义在单个的HTML元 ...

  9. 迅为iTOP-开发板-驱动-can和rfid配置

    在迅为开发板中,在 4412,4418 以及 6818 中,有的开发板默认配置 RFID,有的默认配 置 CAN 驱动(IMX6 默认都配置). 本文档介绍如何配置 CAN 和 RFID 的驱动. 截 ...

随机推荐

  1. openstack-ocata-网络服务5

    一. 网络服务概述 Networking(neutron),允许创建.插入接口设备,这些设备由其他的OpenStack服务管理.插件式的实现可以容纳不同的网络设备和软件,为OpenStack架构与部署 ...

  2. Python基础学习参考(五):字符串和编码

     一.字符串 前面已经介绍过字符串,通过单引号或者双引号表示的一种数据类型.下面就再来进一步的细说一下字符串.字符串是不可变的,当你定义好以后就不能改变它了,可以进一步的说,字符串是一种特殊的元组,元 ...

  3. PHP XML简介

    php xml文件编程. xml简介 XML作用 1.可以作为程序间通讯的标准(ajax text xml) 2.可以作为配置文件 3.可以作为小型数据库 XML语法 一个xml文件应该包括以下几个内 ...

  4. Axure RP一个专业的快速原型设计工具

    Axure RP是一个专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写. Axure简要介绍 Axur ...

  5. 畅通工程续 HDU - 1874

    某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让行人很困扰. 现在 ...

  6. dom文档对象模型图

  7. cookie的初步认识

    一.会话的概念 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 有状态会话:一个同学来过教室,下次再来教室,我们会知道这个同学曾 ...

  8. C# 程序员最常犯的 10 个错误(转)

    关于C#关于本文常见错误 #1:把引用当做值来用,或者反过来常见错误 #2:误会未初始化变量的默认值常见错误 #3:使用不恰当或未指定的方法比较字符串常见错误 #4:使用迭代式 (而不是声明式)的语句 ...

  9. 【BZOJ4653】【NOI2016】区间(线段树)

    [BZOJ4653][NOI2016]区间(线段树) 题面 BZOJ 题解 \(NOI\)良心送分题?? 既然是最大长度减去最小长度 莫名想到那道反复减边求最小生成树 从而求出最小的比值 所以这题的套 ...

  10. [BZOJ1046] [HAOI2007] 上升序列 (dp)

    Description 对于一个给定的S={a1,a2,a3,…,an},若有P={ax1,ax2,ax3,…,axm},满足(x1 < x2 < … < xm)且( ax1 < ...