关于relative和absolute的总结_html/css_WEB-ITnose

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

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

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

如果直接在body里添加文字和一个
标签，
　　1. 给
设置absolute定位，不设置偏移量，则
定位在紧接着文字的下面
　　2. 给
设置absolute，并且设置偏移量，则
是按偏移量相对于body定位
　　3. 给
设置relative，不论是否设置偏移量，都是相对于自己的原来的位置定位。
    遮罩弹窗的实现：    
         
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    
        
 这里阴影部分是相对于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;以后就看不到整个半透明的遮罩啦？？？！！！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章
相关视频



html下拉菜单文字怎么变小


HTML里怎么设置thead表头的颜色


html5中元素能拉伸宽度吗


html中怎么清除li黑点


关于relative和absolute的总结_ht...




接口与抽象类01


类的composer自动加载机制


composer原理与常用命令03


composer原理与常用命令02





网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论






立即提交




专题推荐


独孤九贱-php全栈开发教程
全栈  170W+
主讲：Peter-Zhu  轻松幽默、简短易学，非常适合PHP学习入门


玉女心经-web前端开发教程
入门  80W+
主讲：灭绝师太  由浅入深、明快简洁，非常适合前端学习入门


天龙八部-实战开发教程
实战  120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习






作者信息




认证0级讲师



发布技术文章


最新文章
热门排行




html中怎么清除li黑点
html下拉菜单文字怎么变小
HTML里怎么设置thead表头的颜色
html的name和value是什么意思
html如何给背景图片设置透明度
html中怎么让列表横向排列
html5怎么创建跳转页尾超链接
十分钟搞懂form标签中的GET和POST提交方式



404 not found是什么意思
DOM是什么意思
url是什么意思？
如何改变图片大小
html是什么
html如何创建电子邮件链接
HTML编辑器有哪些？最好用的4款HTML编辑器推荐
如何制作一个简单的HTML登录页面（附代码）





推荐视频教程

javascript初级视频教程


jquery 基础视频教程




视频教程分类

php视频教程
html视频教程
css视频教程
JS视频教程
jQuery视频教程
mysql视频教程
Linux视频教程
Python视频教程








网站首页 
PHP视频
PHP实战
PHP代码
PHP手册
词条
手记
编程词典
php培训

：公益在线php培训，帮助PHP学习者快速成长！
Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作