position四种定位方式区别

position四种定位

static静态定位 位置不会发生改变不会脱离文档流

<style>
	.main{
		width:500px;
		height:500px;
		position:static;
	}
</style>
<div class="main">
	<div class="content"></div>
</div>
<div class="c1"></div>

fixe 固定定位 相对与浏览器定位 脱离文档流

<style>
	.main{
		width:500px;
		height:500px;
		position:fixed;
		right:0;
		bottom:100px;
		background-color: blue;
	}
</style>
<div class="main">
	<div class="content"></div>
</div>
<div class="c1"></div>

relative 相对定位 相对与自身 不会脱离文档流

原位置

<style>
	.main{
		width:500px;
		height:500px;
		background-color: blue;
	}
	.content{
		width:100px;
		height:100px;
		background-color:red;
		position:relative;
	}
</style>
<div class="main">
	<div class="content"></div>
</div>
<div class="c1"></div>

现位置

.content{
		position:relative;
		top:100px;
		left:100px;
	}

absolute 绝对定位 相对于父级元素的定位，如果没有父级元素时相对于窗口的定位 不会脱离文档流

原位置

<style>
	.main{
		width:500px;
		height:500px;
		background-color: blue;
		position:relative;
	}
	.content{
		width:100px;
		height:100px;
		background-color:red;
		position:absolute;
	}
</style>
<div class="main">
	<div class="content"></div>
</div>
<div class="c1"></div>

现位置

.content{
		position:absolute;
		top:100px;
		left:100px;
	}