`
xinklabi
  • 浏览: 1555884 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论

实例演示div+css的绝对定位和相对定位布局

 
阅读更多

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

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

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

图1为未定位时的初始效果,
层级关系为:
<div
<div box1
<div box2
<div box3
效果图:

图1

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

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

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

图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;
效果图:

图3

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

图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;
效果图:

图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
效果图:

图5

以最近的祖先定位元素为参照物的情况
图6中,Box2设置成绝对定位元素,脱离了文档流,文档流由box1-box2-box3变为box1-box3,box2以最近的定位祖先(蓝色框)为参照物。
层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

图6

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

图7

图8中,参照物为最顶级的元素情况
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:

图8

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

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

图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
效果图:

图10

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

图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
效果图:

图12

总结:

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

相关推荐

    Div+CSS 样式的使用演示

    在网页布局中经经常使用到div+css布局。其中div标签层易漂浮,部易控制。 此文件中有相关实例

    100多个JQuery效果示例(实例)div+css+javascrpit

    45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47. jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48. jQuery电子...

    div+css float 布局,适配手机

    看了高洛峰老师的div+css视频教程,不错。 模仿里面的实例,写了个简单的页面,float布局,在手机上显示也可以。 比较简单的演示,对布局有了更多的了解

    DIV+CSS实现的绿色水平一级菜单代码

    本文实例讲述了DIV+CSS实现的绿色水平一级菜单代码。分享给大家供大家参考。具体如下: 这是一款基于DIV+CSS实现的绿色水平网站菜单,相信是你喜欢的一种CSS菜单,绿色风格,用到了几张背景图片,大家顺着路径把图片...

    JS+DIV+CSS实现的经典标签切换效果代码

    本文实例讲述了JS+DIV+CSS实现的经典标签切换效果...这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助。 运行效果截图如下: 在线演示地址如下: ...

    [DIV.CSS网站布局从入门到精通].朱印宏等.扫描版

     本教程力求模拟真实开发场景,用简单的方法帮助读者掌握使用Web标准进行网页设计的方方面面,以及CSS布局中表现与内容分离的相关知识。通过对本教程的学习,希望读者能够以符合标准的设计思维,采用实战操作步骤...

    JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果。分享给大家供大家参考。具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    零基础学HTML CSS源代码

    DIV+CSS布局.html DIV+CSS布局.html div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章(源代码\第15章) 示例描述:本章演示CSS基础部分知识。 CSS基础.html ...

    CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation

    《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47. jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48. jQuery电子...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47. jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48. jQuery电子...

    分享:DivCSS实例教程:2款表单Select样式美化经典案例

    DivCSS布局中表单的美化一直是CSSer头疼的问题,特别是Select样式的美化,更是头痛。今天向大家展示实例,希望对大家的学习工作有所帮助。 演示:http://www.websjy.com/club/websjy_index/select/

    HTML5响应式手机应用教程网站源码 APP应用软件下载pbootcms网站模板886

    1:手工书写DIV+CSS、代码精简无冗余。 2:自适应结构,全球先进技术,高端视觉体验。 3:SEO框架布局,栏目及文章页均可独立设置标题/关键词/描述。 4:附带测试数据、安装教程、入门教程、安全及备份教程。 5:...

    HTML视频教程 网页制作基础合集+PPT文件及源码

    本套视频内容全面,重点突出,同是了讲解内容与实例演示相辅相成,相信不管你是网站开发的初学者,还是具有一定基础的高手,都能从中有所收获。HTML是任何一 个学习网站开发的人都必须学的基础教程,内容虽然不多,...

    DIV_CSS.rar_Java编程_Java_

    div css深入浅出叫你学会页面布局,深入分析实例演示有源代码

    几个CSS3的flex弹性盒模型布局的简单例子演示

    Flexible Box(弹性盒子)能让页面的分布更合理和方便,这是之前使用常规的布局方式所做不到的。 XML/HTML Code复制内容到剪贴板 &lt;div u00a0class=warp&gt;  &lt;div u00a0class=modular&gt;1&lt;/div&gt;  &lt;div u00a0class=...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    程序描述:本章将介绍 GWT应用中高级应用的部分,包括各中组件和布局、如何发送XMLHttpRequest请求,以及如何解决浏览器历史记录问题等等,同时读者还将详细的了解RPC应用的开发过程。 /xmlsample/AjaxSample....

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片...jQuery演示Ajax加载并显示图片的相片画廊实例 jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) jquery版自动滚动图片动画特效插件

Global site tag (gtag.js) - Google Analytics