position:absolute 的深入探讨
来源:互联网 发布:sql server union 编辑:程序博客网 时间:2024/06/07 05:43
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>
</body>
</html>
为了再次验证我们的结论,我们给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>
</body>
</html>
测试结果:
Tips:图中红色边框为html元素,绿色边框为body元素
看到结果,发现如果给body设置了position属性就正常了,所以我之前的猜想是错误的,不是参考body进行定位的。
那么position:absolute是参考哪一个父级(祖父)元素进行定位的?
当给元素设置absolute的时候,它会往上查找 absolute 元素的第一个父元素,如果该父元素的 position 值存在(且不为 static),那么就是根据该父元素进行的定位,否则将会继续查找该父元素的父元素,一直追溯到某个父元素具备不为 static 的 position 值为止,如果不存在满足条件的父元素,则会根据最外层的 window 进行定位。
0 0
- position:absolute 的深入探讨
- position:absolute的深入学习
- position:relative 的深入理解,欢迎探讨
- position的absolute属性
- position之absolute定位深入理解
- 对CSS中的Position、Float属性的一些深入探讨
- 对CSS中的Position、Float属性的一些深入探讨
- 对CSS中的Position、Float属性的一些深入探讨
- 对CSS中的Position、Float属性的一些深入探讨
- 对CSS中的Position、Float属性的一些深入探讨
- 对CSS中的Position、Float属性的一些深入探讨
- position:relative和position:absolute的区别
- position:absolute与position:relative的区别
- position的relative和absolute
- Position:absolute居中的方法
- position absolute relative的区别
- Absolute Position
- Position:absolute
- (15)Struts2_OGNL读取Object栈
- jQuery的height()和JavaScript的height总结,js获取屏幕高度
- div 初始高度,并随内容高度变化
- eclipse下成功启动tomcat却还是显示404的原因
- jQuery判断Dom对象是否存在
- position:absolute 的深入探讨
- 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
- 数据结构(4)--双链表
- CSS position: absolute、relative定位问题不详解
- return false
- CSS样式表继承小结
- 扩展
- CSS文本超出2行就隐藏并且显示省略号
- div里面的内容超出自身高度时,显示省略号