Macji Pro²⁰¹⁰

今天遇到，记录一下。谢谢怿飞，同时我也看到他对待问题的态度（学习的地方）。

我们首先看看W3C的规定

relative：
The box"s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of "position:relative" on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

元素在正常文档流(position in normal flow)，并没有被移出。在ie中，relative会把元素移出文档流，但占物理位置。父容器overflow:hidden将不能隐藏。我们先看例子。

body{
	color:#fff;
}
.box-0{
	width:500px;
	height:100px;
	padding:20px 0 0 20px;
	overflow:hidden;
	background:#f60;
}
.box-1{
	width:500%;
	height:100px;
	position:relative;/*  */
	line-height:100px;
	text-indent:100px;
	background:#000;
}

	this is box-0


    	this is box-1
   

查看测试