`
MauerSu
  • 浏览: 492451 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

CSS网页布局教程:绝对定位和相对定位

 
阅读更多
源:http://www.webjx.com/css/divcss-9948.html
评:好!
网页制作Webjx文章简介:本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法。

CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了,如果你看完本篇文章还不理解绝对定位和相对定位的话,我看你就别学CSS了!哈哈!

概要:

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法。(本文的示例,请看这个附件demo。)

说明:

占位空间:元素在文档流中所占据的空间。
物理空间:元素本身所占据的空间。

下面分3种情况分别对相对定位和绝对定位进行讨论:
1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况

图1为未定位时的初始效果,
层级关系为:
<div
  <div box1
  <div box2
  <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图1

一、用相对定位布局块级元素
元素设置position值: position:relative
此属性值的设置,元素没有脱离文档流,还是普通流定位模型的一部分,会对文档流中其它元素布局产生影响。(说明:蓝色代表占位空间,红色代表元素)

看到本信息,说明该文章来源于网页教学网www.webjx.com,如果文章不完整请到网页教学网webjx.com浏览!

1.仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留,物理空间偏移。

看到本信息说明该文是通过网页教学(webjx.com)整理发布的,请不要删掉!

图2中,设置元素的left和top的值,对box2进行布局,可以发现除了box2偏移之外,其他块级元素的位置没有被影响,可见box2的占位空间还是存在的。
层级关系为:
<div
  <div box1
  <div box2 ——– position:relative ; top:-60px; left:80px;
  <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图2

2.仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度,会影响文档流中的其它元素位置。例如:margin-top:负值; margin-bottom:负值

图3中,box1和box2都设置了元素margin-bottom的值,值等于它们高度的负值。box1和box2物理空间没有改变,占位空间高度为0。box3的margin-bottom值设置为0,物理空间没有改变,占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。
层级关系为:
<div
  <div box1 ——– position:relative ; margin-bottom:-102px;
  <div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
  <div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图3

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
此情况,它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。

加此信息网页教学网(webjx.com)发布目的是为了防止你变懒!webjx.com不主张采集!

图4中,box2是在图3的基础上增加设置left的值产生的效果,可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px - 30px)
层级关系为:
<div
  <div box1 ——- position:relative ; margin-bottom:-102px;
  <div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;
  <div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图4

二、用绝对定位布局块级元素
设置position值:position:absolute;
此属性值的设置,元素从文档流完全删除。

1.仅使用left、right、top和bottom属性布局绝对定位元素的情况
绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素,那么它的参照物为最顶级元素(由于浏览器的默认参照物不同,物可能是BODY或 HTML 元素)。
注意:IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。

设置元素为绝对定位元素后,元素的Left、 Right、Top和Bottom属性默认值不是0,只是将元素脱离文档流。以下例子说明这个问题。
在图5中,将橘黄色的祖先元素设置为定位元素(即参照物),box2设为绝对定位,文档流由box1-box2-box3变为box1-box3,可box2却没有移动到距离参照物0值的位置上,可见box2的Left、 Right、Top和Bottom属性默认值不等于0,它只是脱离了文档流而已。
层级关系为:
<div ———————————position:relative 参照物
  <div—————————-没有设置为定位元素,不是参照物
    <div———————-没有设置为定位元素,不是参照物
      <div box1
      <div box2 ——–absolute
      <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图5

以最近的祖先定位元素为参照物的情况
图6中,Box2设置成绝对定位元素,脱离了文档流,文档流由box1-box2-box3变为box1-box3,box2以最近的定位祖先(蓝色框)为参照物。

本文是网页教学www.webjx.com收集整理或者原创内容,转载请注明出处!

层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
  <div—————————-没有设置为定位元素,不是参照物
    <div———————- position:relative 参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图6

图7中,为改变参照物(橘色框)后的效果
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
  <div—————————-没有设置为定位元素,不是参照物
    <div———————-没有设置为定位元素,不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图7

图8中,参照物为最顶级的元素情况。
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
  <div—————————-没有设置为定位元素,不是参照物
    <div———————-没有设置为定位元素,不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图8

2.仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。

本文是网页教学www.webjx.com收集整理或者原创内容,转载请注明出处!

图9中,使用margin属性布局相对定位元素。
层级关系为:
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素,不是参照物
    <div———————-没有设置为定位元素,不是参照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
      <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图9

IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素,不是参照物
    <div———————-没有设置为定位元素,不是参照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
      <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图10

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
a.margin属性和top、bottom、left、right属性同时使用,如果同一方向偏移,它们的值会产生累加的效果,见图11。

本信息代表文章来源网页教学webjx.com请大家去www.webjx.com浏览!

例如:margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;
层级关系为:
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative; 参照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
      <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图11

b.绝对定位和相对定位的累加加效果不同,如果top、bottom、left、right属性和margin属性偏移的方向相反,top、bottom、left、right属性值有效,反方向的margin属性值无效,见图12。
层级关系为:
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative; 参照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
      <div box3
效果图:
CSS网页布局教程:绝对定位和相对定位_网页教学网
图12

总结:

    相对定位的元素不会脱离文档流,占用文档流的空间,Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
    绝对定位的元素脱离文档流,偏移不影响文档流中的其它元素,Left; Right; Top和Bottom属性与margin属性混合使用,偏移方向相同值累加,方向相反,margin属性值无效。
    绝对定位的元素以最近的定位祖先元素为参照物。
分享到:
评论

相关推荐

    CSS网页布局:关于定位(position)

    使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。...

    CSS网站布局实录 (第二版)PDF版

    3.12 绝对定位与相对定位 3.12.1 绝对定位 3.12.2 相对定位 3.12.3 何时选用绝对与相对定位 第4章 CSS网站元素设计 4.1 用CSS设计网站导航 4.1.1 横向导航 4.1.2 纵向导航 4.1.3 下拉及多级弹出式菜单 4.1.4 门户...

    Web前端开发基础:CSS网站布局 .ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 灵活使用 CSS设计网页 能力目标 学会使用 CSS对网站进行布局 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂...

    自己整理div+css网页标准版式布局(50种布局方式)

    大四了,把之前学的些东西整理整理分享给大家,适合老师网页设计教材及初学者,里面包含了以下内容: 1、固定宽度CSS版式布局 ... 相对定位与绝对定位 IE6双倍边距bug 4、盒模型层次平面示意图和3D示意图

    css基础、选择器介绍、样式介绍

    内容涵盖css样式问题, 基础选择器:标签选择器、类选择器、id选择器、通配符选择器;... 定位:绝对定位、相对定位、固定定位、子绝父相; 装饰:垂直对齐方式、光标类型、边框圆角、overflow溢出部分显示效果

    css 中的定位详解

    一旦父元素有了定位,就可以为绝对定位的元素设置 top(或bottom)和 right(或left)等属性的值(没有同时使用 right 和 left,以及 top 和 bottom,是因为这些坐标可以相互计算出来,没有必要那么啰嗦)。 记住,(X)...

    网页布局绝对定位(position)轻松简单

    要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。 使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为...

    css html 新手入门 静态页面布局

     刚开始学习网页布局的时候老是在纠结到底该用绝对定位还是相对定位,这个问题困扰了我很久,当我做了两天多的京东静态网页之后,才慢慢的不再纠结了。  相对定位和绝对定位什么时候都可以用,没有什么规定,哪个...

    前端网易云案例(网页版) html+css+flex布局

    我相信大家在点进来的那一刻,那你一定学习前端有一段...这篇所有代码,逻辑,非常的规范,希望通过网易云音乐页面更好的帮助你,对所有的常用css属性和代码重构思维,flex布局方式,绝对定位相对定位有更好的认识!

    网页设计 期末大作业web课程设计【原神风格+博客静态页面】

    网页设计 期末大作业web课程设计【原神风格+博客静态页面】,html+css+js纯手写,div...应用了正常流布局浮动布局布局 ,应用左右浮动做了导航栏和网页logo应用相对定位和绝对定位做了主页里导航栏背景图片上的内容 。

    CSS网页布局

    软件开发网提醒您学习CSS,CSS能干什么呢?...定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)。 static值是元素的默认值,它会按照普通顺序

    CSS3定位和浮动详解

    1、 css定位: 改变元素在页面上的位置 2、 css定位机制: 普通流: 浮动: 绝对布局: 3、 css定位的属性: position 把元素放在一个静态的,相对的,绝对的,或者固定的位置中 top/left/right/botom 元素向上...

    H5+CSS3.zip

    css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、相对定位、固定定位,相对定位与绝对定位组合; css弹性盒模型:flex属性,横轴排列,纵轴排列,flex占比; 行内元素水平居中设置; 定...

    CSS网格布局和定位网格项

    是的,在网格中支持绝对定位。可能你的第一反应是不希望在网格布局中使用定位的网格项,但是可能在某些使用案例中必须要使用它们。这篇文章主要用来解释定位网格项在网格容器(gridcontainer)中的特殊性。实际上,...

    CSS之定位布局(position,定位布局技巧)

    css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位置。 2.各个属性值的描述...

    css的三种定位方式使用探讨

    css 3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位。 默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float 具体实例 复制代码代码如下: &lt;html&gt; &...

    精通CSS高级Web标准解决方案-包含源码(高清PDF中文版)

    本书将最有用的CSS技术汇总在一起,在介绍基本的CSS概念和最佳实践之后,讨论了核心的CSS技术,例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。每一章内容由浅入深,直到建立比较复杂的示例。之后...

Global site tag (gtag.js) - Google Analytics