层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
为改变参照物(橘色框)后的效果
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
参照物为最顶级的元素情况。
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
仅使用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
效果图:
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的绝对定位,相对定位,浮动的规则。等等等
CSS相对定位和绝对定位,让你轻松了解css的定位知识和相关的内容
相对定位是将元素相对于自身原本的位置,通过偏移指定的距离,到达新的位置,元素仍然保持其未定位前的形状,它原本所占的空间仍保留。 说明 水平方向的偏移量由left或right属性指定 竖直方向的偏移量由top和bottom...
CSS 绝对定位属性absolute用法初探
通过本文你绝对能理解绝对定位和相对定位了,如果你看完本篇文章还不理解绝对定位和相对定位的话,我看你就别学CSS了!哈哈! 概要: 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系...
W3School 站点上的所有页面都采用了这种技术,如果您打开我们使用 CSS 文件,您会看到我们对页脚的 div 进行了清理,而页脚上面的三个 div 都向左浮动。
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
CSS和Js演示网页绝对定位与相对定位,这些是我们从事前端编程的基础技能,应该学会的东西,这个小示例会告诉你绝对与相对的区别,以及如何去实现他们
主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置,本文首先解释了常见的电脑分辨率,为了页面在不同的分辨率下正常显示,要给页面一个安全宽度,再去使用绝对定位,具体操作步骤大家可查看下文的...
详解学习DIV+CSS之四-绝对定位和相对定位
所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧。 CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案。在CSS的世界里,似乎没有完美这种说法。所以,现在介绍的CSS绝对底部,只是目前个人...
css浮动、绝对与相对定位技术,也是css技术的一个难点。 什么情况下用什么定位,以及如何灵活地应用,是我们需要重点掌握的。
不同的定位类型(静态、绝对、相对和固定),以及位置的浮动,涵盖了大多数布局场景。在探讨每种定位类型是如何工作的之后,将进行一些练习,使它们真正发挥作用。 1.静态定位 静态定位是页面默认值。元素按照它们在源...
1.CSS背景试验1.doc 2.CSS背景试验2.doc 3.CSS颜色.doc ...10.CSS绝对定位.doc 11.CSS相对定位.doc 12.CSS垂直定位.doc 13.CSS尺寸.doc 14.CSS显示.doc 15.CSS可视性.doc 16.CSS浮动.doc 17.CSS清除浮动.doc
body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e { width: 100px; height: 100px; margin: 5 auto; color: #fff; background: #000; } .aa, .bb, .cc, .dd, .ee { top: 10px;...{positi
信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题,所谓“复杂”实质是指触发的条件很复杂,而“BUG” 也...
如果说相对定位没有脱离文档流,相对于对象本身进行偏移有点拖泥带水的话,那么绝对定位绝对是快刀斩乱麻,因为绝对定位可以使一个对象脱离正常的文档流,好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...
4.2.3 absolute(绝对定位) 4.2.4 fixed(固定定位) 4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第 6章 链接与导航 第7章 竖直排列的导航...