css备忘录

position的relative和absolute属性

设置relative后，left和top是相对它原来的位置

<body style="margin:0px;">
<div style="background-color:black;500px;height:500px;margin:50px;position:relative;">
	<div style="background-color:red;200px;height:200px;position:relative;left:50px;top:50px;">
	</div>
    <div style="background-color:yellow;200px;height:200px;">
	</div>
</div>
</body>

<body style="margin:0px;">
<div style="background-color:black;500px;height:500px;margin:50px;position:relative;">
	<div style="background-color:red;200px;height:200px;position:relative;left:50px;top:50px;">
	</div>
    <div style="background-color:yellow;200px;height:200px;position:relative;left:100px;top:100px;">
	</div>
</div>
</body>

设置absolute后，left和top是相对于第一个设置了relative或absolute的外层容器，如果都没有设置过的外层容器，则是相对于浏览器；如果外部容器设置了padding，则left和top相对于外部容器的padding的左上角，而不是相对于外部容器的margin左上角

修改内部div的position为relative或absolute查看效果
<body style="margin:0px;">
<div style="background-color:black;500px;height:500px;padding:50px;margin:50px;position:relative;">
	<div style="background-color:red;200px;height:200px;position:absolute;left:50px;top:50px;">
	</div>
</div>
</body>