如果你想把div放到合适的位置,请看看这篇文章。
<!--
div的position属性
-->
<html>
<style>
.red
{
height:100px;
background:red;
}
.green
{
height:100px;
background:green;
position:relative;
left:50px;
top:50px;
}
.black
{
height:100px;
background:black;
}
</style>
<div class="red"></div>
<div class="green"></div>
<div class="black"></div>
</html>
position是位置,定位。
定位,要选择一个参考物。
比如我的左边,我就是参考物。是我的左边,不是别人的左边。
绿色相对于原来的位置做了偏移。红色,黑色不改变位置。
原来的位置,就是参考物。
偏移了多少呢?用left,top可以控制。
注意:left,top可以用正数,还可以用负数表示。
相对于原来的位置做调整。
top为负数,就是往上提
top为正数,就是往下移
left为正数,就是往右移
left为负数,就是往左移
正数和负数,表示两个相反的方向。
position属性的作用,就是可以把div块,放到任意你想放的位置。
快速实现定位。
position取值absolute
<!--
div的position属性
-->
<html>
<style>
.red
{
height:100px;
background:red;
}
.green
{
height:100px;
background:green;
position:absolute;
}
.black
{
height:100px;
background:black;
}
</style>
<div class="red"></div>
<div class="green">green</div>
<div class="black"></div>
</html>
参考物是浏览器左上角。
绿色div,他的top,left是相对于浏览器最左上角的偏移。
top,left可以设置为正数和负数,正数和负数代表方向相反。
绿色设置了absolute之后,黑色的位置也会发生变化。
position设置成了absolute,就会被下面的div上移覆盖。
实现了隐藏div的功能。也就是脱离了文档流。
参考网站:
CSS position 相对定位和绝对定位www.runoob.com![5dce1cec1cad06fafb71344e2ac956c4.png](https://i-blog.csdnimg.cn/blog_migrate/208d5df28c57412397a48bd8104e6c10.png)