层级关系为:
<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的定位知识和相关的内容
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法。 CSS网页布局教程:...
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
相对定位 相对定位 01 元素的定位 定位 属性 相对 定位 绝对 定位 固定 定位 静态 定位 描述 在CSS中,通过定位属性可以实现网页中元素的精确定位,元素的定位属性主要包括定位模式和边偏移两部分。 相对定位 描述 ...
CSS和Js演示网页绝对定位与相对定位,这些是我们从事前端编程的基础技能,应该学会的东西,这个小示例会告诉你绝对与相对的区别,以及如何去实现他们
详解学习DIV+CSS之四-绝对定位和相对定位
相对定位可以相对于元素在文档流中的静态位置,给元素指定一个位置。如果将一个元素设置为相对定位,但是没有为 top、right、bottom、left 等属性设置值,那么元素将保持在文档流中的相同位置,就像使用的是静态定位...
CSS 绝对定位属性absolute用法初探
W3School 站点上的所有页面都采用了这种技术,如果您打开我们使用 CSS 文件,您会看到我们对页脚的 div 进行了清理,而页脚上面的三个 div 都向左浮动。
HTML中的css样式 的定位 绝对定位和 相对定位
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浮动、绝对与相对定位技术,也是css技术的一个难点。 什么情况下用什么定位,以及如何灵活地应用,是我们需要重点掌握的。
如果说相对定位没有脱离文档流,相对于对象本身进行偏移有点拖泥带水的话,那么绝对定位绝对是快刀斩乱麻,因为绝对定位可以使一个对象脱离正常的文档流,好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...
*定位分为静态定位,绝对定位,相对定位,固定定位,粘性定位* (1)static 静态定位: position的默认值,默认文本流的状态。 不会识别left right top bottom指定的坐标 (2)absolute 绝对定位: a : ...
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的...
介绍了css的定位属性,position的相对定位,绝对定位等,里面的内容并不是很全,希望可以给你提供一些帮助。
...