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;
}