关于relative和absolute的总结 - 叫我爱运动小姐
程序员文章站
2022-05-15 09:17:58
...
对于定位这个性质我原理上来说自己是明白的，但是在实践的过程中，总会出现各种稀奇古怪的情况，加relative或是absolute就可以解决，但是遇到这些情况总是不明白为什么！！！难道是脑容量太小的原因吗！！！=_=!!
还是先记基础知识好了，因为里面还是有很多坑！！
相对定位：
内联元素加相对定位也不支持宽高！！
relative并不会使元素脱离正常文档流！
以上两点说明加上相对定位不影响元素本身的特性，内联元素和块元素依旧保持原来本身的特性！就是说原来是内联加上relative以后还是内联啦！
如果不设置偏移量，相对定位本身并没有什么卵用~
所以，相对定位要加偏移量，left/top/bottom/right是相对于该元素原来的位置设置偏移量的哦哦哦~
绝对定位：
内联元素变得支持宽高啦~如果没有设置宽度，则内容撑开宽度！！（类似于float，内联元素加上float以后也支持宽高滴！！）
会使该元素完全脱离文档流
如果有父级定位则是相对于父级发生偏移，没有定位父级则是相对于body发生偏移！
也是要搭配偏移量使用啦~
如果直接在body里添加文字和一个标签，");}}}}topobj_second.html(topsecond);topobj_minutes.html(topminutes);topobj_hours.html(tophours);topobj_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});
1. 给设置absolute定位，不设置偏移量，则定位在紧接着文字的下面
2. 给设置absolute，并且设置偏移量，则是按偏移量相对于body定位
3. 给设置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> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> contentcontentcontentcontentcontentcontentcontentcontentcontentcontentbr /> 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;以后就看不到整个半透明的遮罩啦？？？！！！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
独孤九贱-php全栈开发教程
全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
玉女心经-web前端开发教程
入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
天龙八部-实战开发教程
实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
作者信息
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论