对于定位这个性质我原理上来说自己是明白的，但是在实践的过程中，总会出现各种稀奇古怪的情况，加relative或是absolute就可以解决，但是遇到这些情况总是不明白为什么！！！难道是脑容量太小的原因吗！！！=_=!!
还是先记基础知识好了，因为里面还是有很多坑！！
相对定位：
　　　　内联元素加相对定位也不支持宽高！！
       relative并不会使元素脱离正常文档流！
       以上两点说明加上相对定位不影响元素本身的特性，内联元素和块元素依旧保持原来本身的特性！就是说原来是内联加上relative以后还是内联啦！
       如果不设置偏移量，相对定位本身并没有什么卵用~

       所以，相对定位要加偏移量，left/top/bottom/right是相对于该元素原来的位置设置偏移量的哦哦哦~

绝对定位：
　　　　内联元素变得支持宽高啦~如果没有设置宽度，则内容撑开宽度！！（类似于float，内联元素加上float以后也支持宽高滴！！）
　　　　会使该元素完全脱离文档流
       如果有父级定位则是相对于父级发生偏移，没有定位父级则是相对于body发生偏移！
　　　　也是要搭配偏移量使用啦~

如果直接在body里添加文字和一个<div>标签，
　　1. 给<div>设置absolute定位，不设置偏移量，则<div>定位在紧接着文字的下面
　　2. 给<div>设置absolute，并且设置偏移量，则<div>是按偏移量相对于body定位
　　3. 给<div>设置relative，不论是否设置偏移量，都是相对于自己的原来的位置定位。
遮罩弹窗的实现：

<style>

body{ height:100%; margin:0;}

.shadow{ position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50);}

.filter{ width:300px; height:200px; border:2px solid #000; background:yellow; position:absolute; top:50%; left:50%; margin-left:-152px; margin-top:-102px;}

</style>

<body>

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

contentcontentcontentcontentcontentcontentcontentcontentcontentcontent<br />

    <div class="shadow"></div>

    <div class="filter"></div>

</body>

这里阴影部分是相对于body定位的！！！(body>html>文档)

如果这个弹窗只写 position:absolute; top:50%; left:50%;则表示左上角那个点是居中的！！！所以这里要设置margin-top,margin-left为整个元素高、宽的一半！

而且这里要注意！！！这里的宽高不是设置的width和height值，而是padding+border+width和padding+border+height的一半！！！！

设置透明度为：opacity:0~1;filter:alpha(opacity=0~100);但是呢，半透明对IE6不兼容！打开是一片黑呀~~

这里还有一个问题，对body要设置height:100%,不然在IE6下遮罩不会占据整个屏幕的~

这里有个问题，为什么给shadow设position:relative;以后就看不到整个半透明的遮罩啦？？？！！！

关于relative和absolute的总结的更多相关文章

  1. relative 和 absolute

    relative总是相对于其最近的父层 absolute总是相对于其最近的定义为relative或absolute的父层

  2. position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？

    position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...

  3. relative和absolute的效果

    我对这样几个效果不是特别理解: 1.float的效果: 就是搞不清楚我想要什么效果的时候可以将某个标签设置为float,一直没总结出什么规律. 2.relative和absolute的效果: 也是不清 ...

  4. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  5. relative、absolute和float

    relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...

  6. position relative和absolute区别

    看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html 总的来说 这两个属性都是通过增加left和right偏离原来的位置  但 ...

  7. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

  8. relative 和 absolute 定位关系

    问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置rela ...

  9. position的static、relative、absolute、fixed、inherit

    网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position ...

随机推荐

  1. js中的什么时候需要用new来实例化?

    有人说js中函数和类就是一个概念,请问:1 为什么我们在大多数情况下没有用new来实例化一个类(函数),如下 JavaScript code   1 2 3 4 5 6 7 <script> ...

  2. 使用IOS7原生API进行二维码条形码的扫描

    使用IOS7原生API进行二维码条形码的扫描 IOS7之前,开发者进行扫码编程时,一般会借助第三方库.常用的是ZBarSDK,IOS7之后,系统的AVMetadataObject类中,为我们提供了解析 ...

  3. dojox.grid.DataGrid

    创建表格 <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" style=&q ...

  4. Bootstrap_导航条

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个 ...

  5. Count Primes - LeetCode

    examination questions Description: Count the number of prime numbers less than a non-negative number ...

  6. PHP-----循环结构

    for循环语句 打印金字塔 完整的金字塔 //打印金字塔 $n=25; for($i=1;$i<=$n;$i++){ //空格循环 for($k=1;$k<=$n-$i;$k++){ ec ...

  7. Eclipse 修改API

    真机调试时报错,提示application api 21,device api 10 Automatic Target Mode: Unable to detect device compatibil ...

  8. 阿里云对象存储OSS————跨域资源共享（CORS）（m3u8 无法加载m3u8：跨域访问被拒绝）

    今天在做视频直播录像的时候,添加一个录制APP的.M3U8文件到OSS的一个test文件中存储,结果是访问不到了: 提示:无法加载m3u8:跨域访问被拒绝!!!!! 项目代码测试地址:https:// ...

  9. Java面向对象三大特点之继承

    概念: 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. 生活中的继承: 兔子和羊属于食草动物类,狮子和豹属于食肉动物类 ...

  10. 打完补丁后测试db_link对SCN的影响

    环境:11.2.0.4.0 升 11.2.0.4.8 后测试 背景:oracle 的db_link会导致实例间SCN同步,SCN增长速度过快则会产生错误: 方案:oracle官方推荐升级版本,但升级之 ...