对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加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. hadoop运维经验

    0.优化:http://dongxicheng.org/mapreduce/hadoop-optimization-0/ http://dongxicheng.org/mapreduce/hadoop ...

  2. HDU1532 Drainage Ditches 网络流EK算法

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

  3. Windows server 2012 AD DS 搭建步骤

    服务器版本:Windows server 2012 1.  配置网络,由于本机会搭建DNS服务器,因此首选DNS服务器设置为127.0.0.1 2.  打开服务器管理器 3.  点击添加角色和功能,下 ...

  4. 各种浏览器(IE,Firefox,Chrome,Opera)COOKIE修改方法[转]

    各种浏览器(IE,Firefox,Chrome,Opera)COOKIE修改方法[转] 网站通过 Cookie 保存了我们访问网站的信息,在不同的浏览器中修改 Cookie 可以如下操作: Firef ...

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

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

  6. hdu3341Lost's revenge(ac自动机+dp)

    链接 类似的dp省赛时就做过了,不过这题卡内存,需要把当前状态hash一下,可以按进制来算出当前的状态,因为所有的状态数是不会超过10*10*10*10的,所以完全可以把这些存下来. 刚开始把trie ...

  7. hdu4352 XHXJ's LIS

    链接 这个题最不好想到的是状态的保存,也没有几亿的数组让你开,怎么保存前面出现了哪些数字. 题意让你求最长上升子序列的长度为k的数字的数目,可以是不连续的,可以保留一个状态栈,栈顶部依次更新,再保证长 ...

  8. Android之hint提示字体大小修改,显示完全

    Android之hint提示字体大小修改,显示完全 1.工作中遇到一个问题,就是自定义EditText的hint提示在超大字体下会显示不全, 2.然后在网上搜索了一下,在这里记录一下,分享给大家,在此 ...

  9. zabbix3.0.4 部署之四 (LNAP > PHP安装)

    1.安装依赖 安装epel-release源 安装 libiconv-1.14.tar.gz (这个还有个devl包)  libmcrypt-2.5.8.tar.gz   mhash-0.9.9.9. ...

  10. 如何浏览并管理 Outlook 邮件?

    当你的邮件多起来的时候你就不得不考虑这个问题了,如何处理各种邮件? 如何浏览并管理 Outlook 邮件? 待续~