对于定位这个性质我原理上来说自己是明白的，但是在实践的过程中，总会出现各种稀奇古怪的情况，加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. MyEclipse 10.7 添加JBOSS 6应用服务器

    首先,确保你的JAVA和JBOSS的环境变量配置正确然后,在myeclipse中,window->preferences->myeclipse->servers->JBOSS- ...

  2. HDU1532 Drainage Ditches 网络流EK算法

    Drainage Ditches Problem Description Every time it rains on Farmer John's fields, a pond forms over ...

  3. 我的android学习经历34

    用类对象作为ArrayAdapter绑定的基本数据类型(和SimpleAdater效果类似) 一般ArrayAdapter绑定的基本数据类型是String,接下来介绍一下类对象作为基本数据类型: 首先 ...

  4. 20 个值得一试的JavaScript 框架

      投递人 itwriter 发布于 2011-09-26 17:46 评论(3) 有1956人阅读 原文链接 [收藏] « » 本文介绍 20 个值得一试的 JavaScript 框架,如果你认为答 ...

  5. 文件上传和下载（可批量上传）——Spring（三）

    在文件上传和下载(可批量上传)——Spring(二)的基础上,发现了文件下载时,只有在Chrome浏览器下文件名正常显示,还有发布到服务器后,不能上传到指定的文件夹目录,如上传20160310.txt ...

  6. Http 状态码对照表

    1xx 消息 1. 100 Continue       2. 101 Switching Protocol       3. 102 Processing 2xx 成功 1. 200 OK      ...

  7. 《BI那点儿事》数据流转换——派生列

    派生列转换通过对转换输入列应用表达式来创建新列值. 表达式可以包含来自转换输入的变量.函数.运算符和列的任意组合. 结果可作为新列添加,也可作为替换值插入到现有列. 派生列转换可定义多个派生列,任何变 ...

  8. phonegap开发经验谈之一命令行建立项目和准备工作

    一安装与配置 安装命令行配置,这个可以参见网上的.3.0的最好用命令行配置. 大家在安装android sdk的时候,会发现里面自带了一个eclipse,并且继承了adt,直接用这个就好了.当然你已经 ...

  9. android音视频点/直播模块开发

      音视频 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 随着音视频领域的火热,在很多领域(教育,游戏,娱乐,体育,跑步,餐饮,音乐等)尝试做音视频直播/点播功能,那么作为开发一个小白, ...

  10. 初试 Matlab 之去除水印

    这几天很痛苦地去学习了下用 Matlab 来处理图像,其实那些算法我觉得还不算很难理解,可是 Matlab 这种反人类的语法(可能对于我来说是这样吧,毕竟熟悉了 C++ / Java 的语法一时间很难 ...