一、绝对定位参考点
1.规律:
(1)默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body作为参考点。
<style> .box1{ width: 300px; height: 300px; background-color: red; /*position:absolute;*/ /*left:0px;*/ /*bottom:0px;*/ } .box2{ width: 200px; height: 200px; background-color: yellow; position: absolute; left:0px; bottom:0px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div>
(2)如果有一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点。
.box1{ width: 300px; height: 300px; background-color: red; position:absolute; left:0px; bottom:0px; } .box2{ width: 200px; height: 200px; background-color: yellow; position: absolute; left:0px; top:0px; }
注意点:i.只要是这个绝对定位元素的祖先元素都可以。ii.指的定位流是指绝对定位/相对定位/固定定位,定位流中只有静态定位是不行的。
(3)如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,而且祖先元素中有多个元素都是定位流,那么这个绝对定位的元素会以离它最近的祖先元素作为参考点。
.......上面的代码不变.......... .box3{ width: 100px; height: 100px; background-color: black; position:absolute; right:0px; bottom:0px; } .........省略代码....... <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div>
二、绝对定位的注意点
(1)如果一个绝对定位的元素是以body作为参考点,那么其实是以网页首屏的宽度和高度作为参考点的,而不是以整个网页的宽度和高度作为参考点的。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>d152_limelightofabsoluteposition</title> <style> .box1{ width: 100px; height: 100px; background-color: red; position:absolute; bottom:0px; right:0px; } .box2{ width: 2000px; height: 100px; background-color: blue; position: } .box3{ width: 200px; height: 2000px; background-color: black; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
(2)一个绝对定位的元素会忽略祖先元素的padding属性。
.box4{ height: 300px; width: 300px; background-color: yellow; padding:50px; /*position:absolute;*/ /*boder:20px black ;*/ } .box5{ height: 100px; width: 100px; background-color: red; position:absolute; left:0px; top:0px; } </style> </head> <body> <div class="box4"> <div class="box5"></div> </div>
三、源码:
d151_referencepointofabosulotepositoning.html
d152_limelightofabsoluteposition.html
地址:
https://github.com/ruigege66/html_learning/blob/master/d151_referencepointofabosulotepositoning.html
https://github.com/ruigege66/html_learning/blob/master/d152_limelightofabsoluteposition.html
2.csdn:https://blog.csdn.net/weixin_44630050
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取java大数据学习视频礼包
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论