欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

关于relative和absolute的总结 - 叫我爱运动小姐

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

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

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

如果直接在body里添加文字和一个
标签,
  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;以后就看不到整个半透明的遮罩啦???!!!

关于relative和absolute的总结 - 叫我爱运动小姐

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 关于relative和absolute的总结 - 叫我爱运动小姐
  • 专题推荐

    作者信息
    关于relative和absolute的总结 - 叫我爱运动小姐

    认证0级讲师

    推荐视频教程
  • 关于relative和absolute的总结 - 叫我爱运动小姐javascript初级视频教程
  • 关于relative和absolute的总结 - 叫我爱运动小姐jquery 基础视频教程
  • 视频教程分类
    ");}}}}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();});