层级关系为:
<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
效果图:

交流加Q:706507884

css position relative obsolution的更多相关文章

  1. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  2. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  3. css position: relative,absolute具体解释

    关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解.以下说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常 ...

  4. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  5. css的relative和position探究

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  6. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  7. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  8. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  9. [置顶] css 背景透明,文字不透明,alpha滤镜,opacity,position:relative;

    都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...

随机推荐

  1. Echart图表相关配置项的设置

    饼状图提示框单位显示 在{c}后面即可添加任意单位内容. 一条记录含有多组数据的柱状图单位显示 标注单位的显示. 目前还未找到方法实现,当鼠标移动到标注上时设置显示单位. 标线单位的显示

  2. GetWindowRect和GetClientRect的异同

    由于项目需要,需要学习CGridCtrl控件的使用,测试控件时发现了一个问题,我无法将控件放在对话框的制定位置. 该问题的原因很容易发现,其实就是GetWindowRec()函数和GetClientR ...

  3. java编写简单的累加程序

    编程思路:1.建立类包demo: 2.在类包中建立CommanParameter类: 3.利用for循环通过强制类型转换将在后台中输入的String类型的字符转换为整型并进进累加操作: package ...

  4. javaWEB总结(5):GET与POST请求

    前言:get和post请求无论在项目中还是在面试中都会经常遇到,这次主要写一个小页面测试一下他们的区别,本人知识有限理解和说的简陋就全当给自己留个备份,日后再补充. 1.项目的目录结构 2.web.x ...

  5. linex下部署发布web项目

    准备工作:通过Xmanager远程连接linux系统,下载对应的jdk和tomcat. 1.通过Xmanager远程连接linux系统,下载地址请自己网上搜索吧. 2.下载jdk (这里为jdk-7u ...

  6. wordpress 修改过程

    chown -R www /home/www/wordpress,把所有者修改成www. 如果不行 则 解决"要执行请求的操作,WordPress需要访问您网页服务器的权限"方法: ...

  7. Codeforces Round #364 (Div. 2) E. Connecting Universities

    E. Connecting Universities time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  8. BFS and Queue

    BFS (Bridth First Search) can be implemented by a queue. Procedure is like this: (Q is Queue) 1, Put ...

  9. crossdomain 可用

    <cross-domain-policy> <allow-access-from domain="*"/> <allow-http-request-h ...

  10. Linux非root用户程序使用小于1024端口

    在Linux下,默认端口1024下的是要在root下才能使用的,在其他用户下,如果尝试使用将会报错.在有的时候,我们可能考虑程序运行在root帐户下,可能会给Linux系统带来安全风险.那如何能够让非 ...