注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

position:absolute 的深入探讨  

2015-05-25 23:20:26|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天给大家说说,position:absolute 参考谁进行定位的问题。之前大家可能会认为如果absolute元素的父级(祖父)元素没有设置position属性的时候,该元素的position:absolute会参考body进行定位。
换句话说是如果父级设置了position(且值为非static),参照(最近的)父级的内容区域的左上角为初始点,结合top left right bottom 进行定位; 如果没有设置,往其父级继续寻找,直到找到为止,如果一直没有,则相对与body进行定位(我们猜想是这样的,不一定是对哦~~

测试示例:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<style>
/*正常是不能这么设置的,这边主要是用来测试*/
html {
margin: 20px;
border: 20px solid red;
}
/*正常是不能这么设置的,这边主要是用来测试*/
body {
height: 400px;
margin: 30px;
border: 20px solid green;
}
.wrap {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">梦幻雪冰</div>
<script></script>
</body>
</html>

测试结果:红色边框为html元素,绿色边框为body元素
position:absolute 的深入探讨 - 梦幻雪冰 - 梦幻雪冰

position:absolute 的深入探讨 - 梦幻雪冰 - 梦幻雪冰

结果:测试数据发现如果定位的元素的父级(祖父)没有设置position属性的时候,不会参考body进行定位。

为了再次验证我们的结论,我们给body设置position属性(值为非static),看看结果会是如何?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<style>
/*正常是不能这么设置的,这边主要是用来测试*/
html {
margin: 20px;
border: 20px solid red;
}
/*正常是不能这么设置的,这边主要是用来测试*/
body {
position: relative;
height: 400px;
margin: 30px;
border: 20px solid green;
}
.wrap {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">梦幻雪冰</div>
<script></script>
</body>
</html>

结果:红色边框为html元素,绿色边框为body元素
position:absolute 的深入探讨 - 梦幻雪冰 - 梦幻雪冰
position:absolute 的深入探讨 - 梦幻雪冰 - 梦幻雪冰
 
看到结果,发现如果给body设置了position属性就正常了,所以我们之前的猜想是错误的,不是参考body进行定位的。
那么position:absolute是参考哪一个父级(祖父)元素进行定位的?

当给元素设置absolute的时候,它会往上查找 absolute 元素的第一个父元素,如果该父元素的 position 值存在(且不为 static),那么就是根据该父元素进行的定位,否则将会继续查找该父元素的父元素,一直追溯到某个父元素具备不为 static 的 position 值为止,如果不存在满足条件的父元素,则会根据最外层的 window 进行定位。

英文如下:
position:absolute 的深入探讨 - 梦幻雪冰 - 梦幻雪冰


欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
梦幻雪冰微博——梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
HTML5学堂官网——HTML5学堂
HTML5学堂微信
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
参考文章:http://www.vanseodesign.com/css/css-positioning/
参考文章:http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

欢迎大家学习交流,英语能力有限~~~
 

  评论这张
 
阅读(99)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017