Top

css知多少之绝对定位小记

一.position定位常见属性

对于属性position来说，属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详述说明

看栗子

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>绝对定位position:absolute</title>
	<style>
		p {
			background-color: #e8e8e8;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<p>精通CSS高级web标准解决方案(第二版)</p>
	<p style="position: absolute; background-color: #FFC107;">JavaScript基础高级教程</p>
	<p>如何有效阅读一本书</p>
</body>
</html>

以上属性列表中最复杂的是position:absolute绝对定位，有如下几大特性

1.包裹性 对于inline/block元素，设置position后，都向inline-block化靠拢

2.破坏性 脱离文档结构，它会产生破坏性会导致父元素高度的塌陷，会影响其他元素重排.

3.跟随性 虽然absolute脱离文档结构，但它在不设置top/left值的情况下，还是老老实实的待在原来的位置

4.脱离文档流  脱离文档结构，不在标准的文档结构中

5.悬浮上方 absolute元素会悬浮在页面上方，会遮挡住下方的页面内容

6.突破overflow限制  overflow:hidden会裁剪超出内容区域，但absolute元素会悬浮在页面上方，突破overflow限制

absolute定位比较复杂。如果为absolute设置了top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：

 

文章出处 王福朋《css知多少》总结

 

posted @ 2017-01-03 21:41  Avenstar  阅读(267)  评论(0)  编辑  收藏  举报