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是相对于最近的父级.content进行定位的。

4、*定位：定点+参照物
用relative作为参照物基架
用absolute定位

5、做一个五环，使它居于浏览器正中。
html

<div class="plat">
	<div class="circle1"></div>
	<div class="circle2"></div>
	<div class="circle3"></div>
	<div class="circle4"></div>
	<div class="circle5"></div>

</div>

css

.plat{
	position: absolute;
	left:50%;
	top:50%;
	margin-left: -190px;
	margin-top: -95px;
	/*width:380px;
	height:190px;
	border:5px solid black;
	}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5,
.circle6{
		position: absolute;
		width:100px;
		height:100px;
		border-radius: 50%;
		border:10px solid black;
}

.circle1{
		border-color:red;
		left:0;
		top:0;
}
.circle2{
		border-color:green;
		left:130px;
		top:0;
		z-index: 1;
}
.circle3{
		border-color:orange;
		left:260px;
		top:0;
}
.circle4{
		border-color:purple;
		left:65px;
		top:70px;

}
.circle5{
		border-color:yellow;
		left:195px;
		top:70px;
}

z-index表示计算机z轴，由屏幕垂直指向人，数值越大，越“靠近”我们。

6、两栏布局
html

<div class="right"></div>

<div class="left"></div>

css

.right{
	right:0;
	position: absolute;
	width:100px;
	height:100px;
	background-color:red;
	opacity: 0.5;

}
.left{
	margin-right:100px;
	height:100px;
	background-color:black;
}

.right必须写在前面，absolute先定位，后面的元素才会补上。

下图是黑色块未设置右外边距，占用红色块的位置

下图是粉色块用absolute定位，但写在后面，并未与黑色块产生影响。

                                                                   2018.9.20