欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> DIVCSS5为大家实例讲解布局。绝对定位我们要用到样式和，同时需要top、bottom、left、right配合布局实现绝对定位。通过真实案例演示与介绍绝对定位布局方法技术。
Css div绝对定位案例截图
遇到以上的不规则案例布局，如果使用、等浮动实现比较麻烦，但使用绝对定位即可很好简单地实现。接下来DIVCSS5为大家介绍position绝对定位方法布局以上小的案例。
一、用到CSS样式和HTML标签及相应解释
1、要用到样式单词及解释
position：绝对定位样式实现DIV定位布局其设置值absolute和relative应用
：宽度，设置对象宽度
：高度，设置对象高度
：行高，设置文本行高
：设置div对象靠左距离
：设置div对象靠左距离
：设置div对象靠左距离
：设置div对象靠左距离
：背景，设置背景图片和颜色
：设置字体颜色
：设置字体大小
：设置字体加粗
2、用到及解释
：用于布局结构框架
：用于布局列表型数据列表
：用于布局栏目标题
二、绝对定位实际案例布局思维解释介绍
DIVCSS5将隐藏文字后整图作为最外层大盒子DIV的，命名为bg.jpg。
隐藏文字后的图片素材，可直接保存使用
这一个最外层DIV，设置好宽度高度、背景图片，同时设置position:relative。此盒子里分别布局3个小DIV盒子，分别设置好宽度高度，同时设置position:absolute绝对定位再使用left、right、top、bottom这几个样式定位好这3个盒子位置。
通过以上布局即可布局好三个，再分别布局栏目标题和内容即可实现。
同时此案例我们会在DIVCSS5提供的免费基础上进行布局，以便兼容各大浏览器。
三、绝对定位案例重要代码
以下是最外层DIV盒子及和内容3个小盒子布局代码。
&!DOCTYPE&html&&&&charset=&utf-8&&&绝对定位&实例在线演示&DIVCSS5&&href=&images/style.css&&rel=&stylesheet&&type=&text/css&&&&&&&id=&wrapper&&&class=&box1&&&class=&box2&&&class=&box3&&&&&
以上HTML布局一个大盒子使用ID，里面三个小DIV盒子使用CLASS。
2、CSS代码
#wrapper{&margin:0&position:width:610height:559background:url(bg.jpg)&no-repeat}&/*&position:relative是绝对定位关键，父级设置&*/&.box1{&position:&width:147&height:140&left:198&top:14px}&.box2{position:&width:141&height:186&left:31&bottom:17px}&.box3{position:&width:132&height:188&right:28&bottom:67px}&/*&三个小盒子使用position:relative同时设置宽度&高度&left&right&top&bottom实现布局与准确定位&*/&
特别说明：以上三个小盒子绝对定位宽度、高度、top、left、right、bottom的准确值必须通过PS软件获得，相信参加同学通过上课已经学会获取各属性和值的方法。（DIVCSS5课堂中介绍和视频操作演示过各值PS如何获得的技术技巧）这里就不再详细介绍与讲解。
3、大概效果截图
在DW软件中效果截图
从以上图看出布局结构初现。再以上基础上分别布局栏目标题和对应内容即可完成此布局。
四、完整案例代码
1、完整CSS代码
@charset&&utf-8&;&/*&DIVCSS5-CSS初始化模板-&*/&body,&div,&ul,&li,h3{margin:0;&padding:0;font-style:&font:12px/22px&&\5B8B\4F53&,Arial,&Helvetica,&sans-serif}&/*&\5B8B\4F53&代表&宋体，更多中文字体转&Unicode&/jiqiao/j325.shtml&*/&ol,&ul&,li{list-style:none}&img&{border:&0;&vertical-align:middle}&body{color:#FFF;background:#FFF;&text-align:center}&a{color:#FFF;text-decoration:none}&&a:hover{color:#BA2636;text-decoration:underline}&/*&根据本实例&设置超链接字体与没有超链接字体演示为白色&*/&&#wrapper{&margin:0&position:width:610height:559background:url(bg.jpg)&no-repeat}&/*&position:relative是绝对定位关键，父级设置&*/&&.box1{&position:&width:147&height:140&left:198&top:14px}&.box2{position:&width:141&height:186&left:31&bottom:17px}&.box3{position:&width:132&height:188&right:28&bottom:67px}&/*&position:absolute是绝对定位关键，子级设置同时lef&right&top&bottom配合使用&*/&&h3.title{&height:32&line-height:32&font-size:14&font-weight:&text-align:left}&/*&标题统一设置&*/&ul.list{&text-align:&width:100%;&padding-top:8px}&ul.list&li{&width:100%;&text-align:&height:22overflow:hidden}&/*&加了overflow:hidden防止内容过多后自动换行&隐藏超出内容&*/&
&!DOCTYPE&html&&&&charset=&utf-8&&&绝对定位&实例在线演示&DIVCSS5&&href=&images/style.css&&rel=&stylesheet&&type=&text/css&&&&&&&id=&wrapper&&&class=&box1&&&class=&title&新闻动态&&class=&list&&&href=&/wenji/w558.shtml&不会程序能学会CSS吗？&&href=&/wenji/w556.shtml&DIVCSS学习难吗？&&href=&/peixun/&我要参加DIVCSS5的培训&&href=&/css-tool/t720.shtml&jQuery所以版本集合整理&&&&class=&box2&&&class=&title&DIVCSS5栏目&&class=&list&&&href=&/html/&CSS基础教程&&href=&/htmlrumen/&HTML基础教程&&href=&/wenji/&CSS问题&&href=&/css-tool/&CSS制作工具&&href=&/jiqiao/&DIV&CSS技巧&&href=&/css-texiao/&DIV+CSS+JS特效&&&&class=&box3&&&class=&title&网站栏目&&class=&list&&&href=&/cssrumen/&DIV&CSS入门&&href=&/htmlrumen/&HTML入门教程&&href=&/shili/&CSS实例&&href=&/&DIVCSS5首页&&href=&/template/&DIV&CSS模块模板&&href=&/w3c/&DIV&CSS&WEB标准&&&&&&
3、效果截图
CSS实例最终浏览器效果截图
五、CSS实例演示与下载
1、在线演示
2、完整案例下载（包括HTML+CSS+PSD文件）
六、DIVCSS实例总结
以上实例主要使用position绝对定位样式使用，通过position实现绝对定位布局。同时此案例还用到了H3、UL LI标签进行布局。希望大家一定亲自实践，这样才算真正掌握。从自己实践中会体会到真正布局技巧方法。
查看另外一个如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 18:11
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型.
1.页面上的每个元素可以看成一个矩形框，每个框由元素的内容，内边距，边框和外边距组成。
2.如果在元素上添加背景，则背景是边框, 内边距和内容组成的区域.
3.在css中width和height指的是内容区域的宽度和高度。增加内边距，边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。即width=element
注意：ie的盒模型中，width指的是内容，内边距，和边框的宽度总和（没有外边距）。即：width=element+padding+border
外边距叠加：当两个或更多的垂直外边距相遇时，它们将形成一个新外边距。这个新外边距的高度等于两个发生叠加的外边距的高度中的较大者。
注意：只有普通文档流中的块框的垂直外边距才会发生外边距叠加。行内框，浮动框或绝对定位框之间的外边距不会叠加.
会有以下四种情况:
html中的元素分为块级元素和行内元素,对应的生成的框即为块框和行内框.
块框从上到下一个接着一个排列,块框之间的距离由垂直外边距决定.
行内框在一行中水平排列.
注意:可通过设置display属性改变框的类型.
css的三种定位机制
css由3中基本的定位机制:普通流,浮动和绝对定位.
若非通过css样式指定,所有的框都在普桶流中,普通流中的元素框位置由元素在html中的位置决定.
相对定位(视为普通流定位):因为是相对定位元素的位置是&相对于&元素在普通流中的初始位置而定,所以视为普通流定位的一种.相对定位的元素任占据原来的空间,并且可以覆盖其他框.
将属性position设置为relative.通过设置top和left使框相对于原来元素的起点移动
绝对定位:绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的.绝对定位的元素位置与文档流无关,因此不占据空间.
相对定位元素的位置是&相对于&元素在普通流中的初始位置而定.
绝对定位是&相对于&距离它最近的已定位祖先元素,如不存在,则相对于初始包含块.
注意:绝对定位因为与文档流无关,因此也会覆盖页面上的其他元素.p47
当绝对定位的元素由重合时刻通过z-index设置叠放次序.
将屏幕看成湖面,z-index设置的值越高,离湖面越近,则显示的优先级就越高.z-index值高的元素显示优先级高于z-index值低的元素.
固定定位:视为绝对定位的一种. 固定元素的包含块为浏览器窗口.
浮动:浮动会让元素脱离文档流.浮动框可以左右移动知道它的外边距碰到包含框或者另一个浮动框的边缘.
若浮动的元素后面有一个文档流中的元素,那么浮动元素旁边的行框将被缩短.文档流中的元素会紧跟浮动框之后（例如文本围绕图像）.
解决方法:对行框应用clear属性,属性值为left,right,both,none.而在具体实现时,浏览器会在元素顶上添加足够的外边距,是元素的顶边缘垂直下降到浮动框下面.
与css定位有关的属性(第一个属性值为默认属性):
规定元素的定位类型
static, absolute, fixed, relative
设置定位元素的上外边距边界与其包含块上边界之间的偏移
auto, 百分数, 数值
设置定位元素右外边距边界与其包含块右边界之间的偏移
auto, 百分数, 数值
设置定位元素下外边距边界与其包含块下边界之间的偏移
auto, 百分数, 数值
设置定位元素左外边距边界与其包含块左边界之间的偏移
auto, 百分数, 数值
规定框的浮动
none, left, right
规定元素的哪一侧不允许其他浮动元素
none, left, right, both
规定元素应生成框的类型
inline, none, block, inline-block
剪裁绝对定位元素
auto, 形状rect (top, right, bottom, left)
规定当内容溢出元素框时发生的事情
visible, hidden, scroll, auto
vertical-align
设置元素的垂直对齐方式
baseline, sub, super, top, bottom, 数值,百分数
visibility
规定元素是否可见
visible, hidden, collapse
设置元素的堆叠顺序
auto, 数值
规定要显示的光标的类型
Auto, text, help,pointer, move
阅读(...) 评论()温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'关于CSS中绝对定位和相对定位的问题',
blogAbstract:'最近在做一个作业提交系统，目前是前台的部分，基本上都使用css的知识，可是今天发现一个问题很头疼，当用position:相对定位的时候，修改类的top和left都是可以出现让我满意的结果的，可是如果换成：position:我所使用的块级元素只有左右的变化，top的改变是没有用的，感觉很无力，就去网上找了一下看到好文章就收藏了：position: \n如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。（再一点，相对定\n位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）\nposition: 表示绝对定位，位置将依据浏览器左上角的0点开始计算，\n绝对定位使元素与文档流无关，因此不占据空间',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:6,
publishTime:0,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}浅谈CSS编程中的定位问题
作者：佚名
字体：[ ] 来源：WEB开发者 时间：07-10 14:58:43
这篇文章主要介绍了CSS编程中的定位问题,包括绝对定位与相对定位等方面,需要的朋友可以参考下
当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说，有一些东西会绊倒新手，所以在它成为你的惯用技巧前你需要掌握它们。
　　一旦你更深入地了解了它是怎么运作的，你就能够做出一些更棒的事情来。　　CSS盒模型和定位的类型
　　为了搞清楚定位首先你得了解CSS盒模型。在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章。我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结。
　　在CSS中，每一个元素都由一个矩形盒子所包含。每一个盒子都会具有一个内容区，内容区被一个内边距所包裹，内边距外是盒子的边框，并且在边框之外会有一个外边距用于与其他盒子分隔开来。这些你可以从下面这张图片看到。
　定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。定位模式包括了常规文档流，浮动，和几种类型的 position 定位的元素。
　　CSS position 属性可以取5种值：
&&& position: absolute&&& position: relative&&& position: fixed&&& position: static&&& position: inherit
　　我会在下面对前三个值进行详细的阐述并简单地讲解一下最后两个值。
　　static 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档流中。它处于什么位置以及它如何影响周边的元素都是由盒模型所决定的。
　　一个 static 定位的元素会忽略所有 top，right，bottom，left 以及 z-index 属性所声明的值。为了让你的元素能使用任何的这些属性，你需要先为它的 position 属性应用这三个值的其中之一： absolute，relative，fixed
　　position 值为 inherit 的元素和其他所有属性的继承值一样，元素只是简单地应用了与父元素一样的 position 值。　　绝对定位（Absolute Positioning）
　　绝对定位的元素会完全地从常规文档流中脱离。对于包围它的元素而言，它会将该绝对定位元素视为不存在。就好像 display 属性被设为 none 一样。如果你想要保持它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。
　　你可以通过 top, right, bottom, 和 left 四个属性来设置绝对定位元素的位置。但你通常只会设置它们其中的两个，top 或者 bottom，以及 left 或者 right。默认地它们的值都为 auto。
　　弄明白绝对定位的关键是知道它的起点在哪里。如果 top 被设置为20px那么你要知道这20px是从哪里开始计算的。
　　一个绝对定位的元素的起点位置是相对于它的第一个 position 值不为 static 的父元素而言的。如果在它的父元素链上没有满足条件的父元素，那么绝对定位元素则会相对于文档窗口来进行定位。哈！
　　关于&相对&这个概念你或许有点迷惑，尤其是还有一个叫相对定位的东西，这是我们还没有讲到的。
　　当你在一个元素的样式上设置 position:absolute 意味着需要考虑父元素，并且如果父元素的 position 值不为 static ，那么绝对定位元素的起点为父元素的左上角位置。
　　如果父元素没有应用除了 static 以外的 position 定位，那么它会检查父元素的父元素是否有应用非 static 定位。如果该元素应用了定位，那么它的左上角便会成为绝对元素的起点位置。如果没有则会继续向上遍历DOM直到找到一个定位元素或者寻找失败以到达最外层的浏览器窗口。　　相对定位（Relative Positioning）
　　相对定位的元素也是根据 top, right, bottom, 和 left 四个属性来决定自己的位置的。但只是相对于它们原来所处于的位置进行移动。在某种意义上来说，为元素设置相对定位和为元素添加 margin 有点相似，但也有一个重要的区别。区别就是在围绕在相对定位元素附近的元素会忽略相对定位元素的移动。
　　我们可以把它看做是一张图片的重像从真实的图片的位置开始进行了一点移动。它原始图片所占据的位置仍然保留，但我们已经没法再看到它，只能看到它的重像。这样就让元素之间可以进行位置的重叠，因为相对定位元素能够移动到其他元素所占据的空间中。
　　相对定位元素离开了正常文档流，但仍然影响着围绕着它的元素。那些元素表现地就好像这个相对定位元素仍然在正常文档流当中。
　　我们无需再追问这个相对的位置是在哪里。因为这个相对位置很显然是正常的文档流。相对定位有点儿像为元素添加了 margin ，对相邻元素来说却像是什么都没发生过。但实际上并没有增加任何的 margin 。　　固定定位（Fixed Positioning）
　　固定定位的行为类似于绝对定位，但也有一些不同的地方。
　　首先，固定定位总是相对于浏览器窗口来进行定位的，并且通过哪些属性的 top, right, bottom, 和 left 属性来决定其位置。它抛弃了它的父元素，它就是定位中表现地有点儿反叛。
　　第二个不同点是其在名字上是继承的。固定定位的元素是固定的。它们并不随着页面的滚动而移动。你可以告诉元素它所处的位置并永远不再移动。噢~好像还挺乖巧的。
　　在某种意义上说固定定位元素有点儿类似固定的背景图片，只不过它的外层容器块总是浏览器窗口罢了。如果你在 body 中设置一个背景图片那么它与一个固定定位的元素的行为时非常像的，只不过在位置上的精度会略少一些。
　　背景图片也不能改变其在第三个维度的大小，也因而带来了 z-index 属性。　　打破了平面的 Z-Index
　　这个页面是一个二维平面。它具有宽度和高度。我们活在一个用 z-index 作为其深度的三维的世界当中。这个额外的维度能够穿越一个平面。
由上图可知，高的 z-index 位于低的 z-index 的上面并朝页面的上方运动。相反地，一个低的 z-index 在高的 z-index 的下面并朝页面下方运动。
　　没有的 z-index 的话，定位元素会有点儿麻烦。因为 z-index 能让一个定位元素位于另一个元素的上方或者下方，这或许能让你做出点创造性的东西。所有的元素的默认的 z-index 值都为0，并且我们可以对 z-index 使用负值。
　　z-index 实际上比我在这里描述的要更加地复杂，但细节写在了另一篇文章里。现在只需要记住这个额外维度的基本概念以及它的堆叠顺序，另外还要记住只有定位元素才能应用 z-index属性。　　定位的问题
　　对于定位元素来说由几个比较常见的问题，都值得我们好好了解。
　　1.你不能在同一个属性当中应用定位属性和浮动。因为对使用什么样的定位方案来说两者的指令时相冲突的。如果你把两个属性都添加到一个相同的元素上，那么就期望在CSS中较后的那个属性时你想要使用的吧。
　　2.Margin 不会在绝对元素上折叠。假设你具有一个 margin-bottom 为20px的段落。在段落后面是一个具有30px的 margin-top 的图片。那么段落和图片之间的空间不会是50px（20px+30px）而是30px（30px & 20px）。这就是所谓的 margin-collapse，两个 margin 会合并（折叠）成一个 margin。
　　绝对定位元素不会像那样进行 margin 的折叠。这会使它们跟预期的不一样。
　　3.IE在 Z-index 上有一些BUG。在IE 6中 select 元素总是处于堆叠层级的最上方而不管它的 z-index 和其他元素的 z-index 是多少。
　　IE 6和IE 7在堆叠层级上又有另外一个问题。IE 6由最外层的定位元素的层级来决定哪一组的元素处于层级的最上面，而不是每一个单独的元素自身的层级决定。
&&style=&width:&&height:&&float:&&&id=&3_nwp&&style=&text-decoration:&&&mpid=&3&&target=&_blank&&href=&/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=50c074aa65c25dc2&k=style&k0=style&kdi0=0&luki=6&n=10&p=baidu&q=_cpr&rb=0&rs=1&seller_id=1&sid=c25dc265aa74c050&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3070%2Ehtml&urlid=0&&id=&3_nwl&&style=&color:#0000font-size:14width:height:float:&style=&z-index:&&&&
&&&&style=&z-index:&1&&&
&style=&z-index:&&&&&
　　对上面这段结构，你会预料段落元素处于堆叠层级的最上方。因为它具有最大的 z-index 值。但在IE 6和IE 7中，图片为处于段落的上方。因为 img 具有比 div 更加高的 z-index 层级。因此它会位于所有 div 的子元素的上方。　　总结
　　一个元素上所设置的位置属性会根据其中的一种CSS定位模式来运作。你可以为定位元素设置 absolute, relative, fixed, static (默认), 和 inherit 中的其中一个值。
　　定位模式和CSS定位元素，定义了一个盒子在布局中应该处于什么位置以及围绕它的元素会受到定位元素带来的影响。
　　z-index 属性只能被应用与定位元素上。它为页面增加了第三个维度并设置了元素的层级上的顺序。
　　定位属性看起来好像很好理解，但它的运作与它在表面所看到的有点儿不一样。你可能会觉得的是相对定位更加类似绝对定位。当在做布局设计的时候你通常会想使用浮动并在指定的元素上应用定位来打破布局。
大家感兴趣的内容
12345678910
最近更新的内容CSS 绝对定位|CSS 绝对定位
CSS 绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
CSS 绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
#box_relative {
如下图所示：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 来控制这些框的堆放次序。
CSS 绝对定位实例
本例演示如何使用绝对值来对元素进行定位。}