DIV+CSS相对定位和绝对定位用法详解_Css3.0_css2.0_html5

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> Css3.0_css2.0_html5

DIV+CSS相对定位和绝对定位用法详解

夜鹰教程网来源：www.yyjcw.com 日期：2016-10-24 0:13:50

在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，比如CSS相册等等，因此自己杂乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转DIV+CSS定位时，我就已是高手了。不管你怎么想，我只希望下面的教程能让你更深入地了解CSS定位属性。

本文和大家重点讨论一下DIV+CSS网页布局之CSS绝对定位和CSS相对定位，在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措。
      详解DIV+CSS相对定位和CSS绝对定位用法
      在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，比如CSS相册等等，因此自己杂乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转DIV+CSS定位时，我就已是高手了。不管你怎么想，我只希望下面的教程能让你更深入地了解CSS定位属性。
      阅读建议
      先说说我这篇教程的思路，这对于你在正真开始阅教程前是有很大帮助的。我的思路是这样的：先给出定位较专业化精炼的解释，接下来再用打比如的方法形象地介绍它们，此时大家要和前面讲到的专业解释对比阅读。介绍完理论，将通过实例来介绍定位的各知识点，虽然实例不美，但每一则实例都是精心挑选的，如果要完整掌握DIV+CSS定位方法，请务必弄懂每一个实例的原理。最后将会带大家做一个较为酷的综合实例。如果你想提高你阅读本文的兴趣或者动力，你可以先跳到最后看综合实例的运行效果。
      1.定位的专业解释
      (1)语法
      position:static|absolute|fixed|relative
      (2)说明
      从上面语法可以看出，定位的方法有很多种，它们分别是静态(static)，CSS绝对定位(absolute)，固定(fixed)，CSS相对定位(relative)。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：CSS绝对定位(absolute)、CSS相对定位(relative)。
      CSS绝对定位(absolute)：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行CSS绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定位。CSS绝对定位对象可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值(目前负值FF不支持)。
      CSS相对定位(relative)：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
2.定位的形象解释
      　我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，这个房间半空中还有不少的钩子用于挂东西用。现在我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。
      (1)贡献的CSS绝对定位(absolute)
      　对照前面解释，如果西瓜被赋予CSS绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它(CSS绝对定位对象会让出自己原先占用位置，所以说它是贡献的)。此时如果之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜还是挂在原来位置，至于西瓜要怎放，则以房间左上角(body左上角)为准，用left，right，top，bottom值来定位。
      但是如果水桶也给出了定位设置(通常是CSS相对定位，下面有讲到这一实用技巧)，此时西瓜的摆放就没有那么自由了，尽管此时西瓜被拿起来了不会影响水桶中的水(文本流)，但它还是要听桶的话，桶会告诉西瓜“你可以活动，但应该在我的范围内走动，比方说我要你在我左上方1米处，你就要跟死这一点，我走你也要跟着走”，如果桶中有很多个西瓜，可以全部拿出来吊到半空中，它们将被安排在不同高度的空间(层)，所以在房顶垂直往下看，有可能看到不同西瓜层叠在一起的情况(这个所谓的高度在网页中是不存在的，就像FLASH动画中的不同层上安排了元素，但它们在看时不会有深度感觉)。可见CSS绝对定位的对象参考目标是它的父级，专业称之为包含块。
      (2)自私的CSS相对定位(relative)
      CSS相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。CSS相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的(相对对象本身偏移)。再拿前边作比如来解，那么此时西瓜似乎是有魔法的，如果西瓜通过CSS相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，如果搅动一下桶中的水，那个凹的位置会发现改变(文本流对CSS相对定位对象还存在影响)，但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。
      (3)总结两种定位的特征
      CSS绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层，我们这里理解为文本流就放在首层)，它们互不影响，但是它们怎么移动与你楼的地基和面积(父级)有关。CSS相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。
      (4)对特殊情况的补充
      在用CSS相对定位和CSS绝对定位的时候，有一种情况是它们的定位值用到了负值则对象可沿相反方向移动，刚才说到的把对象安排在一栋楼的不同层，如果某个对象一开始就是背靠着最外边墙的，此时再用一个负值定位它，它就会神奇般地跑出墙外去了，当然现实中可没有这种惊险而又神奇的事发生，本人只为了延用上面的比如作形象解释。

复制链接网友评论收藏本文关闭此页

上一条：百分比定位背景图片_css样式表背景… 下一条：无法屏蔽的网页右下角浮动窗口

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网