day06层模型

day06

层模型
position：absolute\relative\fixed
1、absolute 绝对定位
脱离原来位置进行定位（让出位置，其他元素可以占用）。
在父子结构中，相对于最近的有定位的父级进行定位，如果没有，相对于文档进行定位。
2、relative 相对定位
保留原来位置进行定位。（其余元素不能占用）。
在父子结构中，相对于自己原来的位置进行定位。
3、fixed 定点

html

<div class="wrapper">
	<div class="content">
		<div class="box"></div>
	</div>
</div>

css

.wrapper{
	    margin-left: 100px;
		width:200px;
		height:200px;
		background-color: red;
}
.content{
		position：absolute;
		width:100px;
		height:100px;
		background-color: orange;
}

.box{
		position:absolute;
		left:50px;
		width:50px;
		height:50px;
		background-color: yellow;
}

如上面的.box是相对于最近的父级