相对定位

来源:互联网 发布:网络运营主管岗位职责 编辑:程序博客网 时间:2024/05/16 18:37

相对定位:1.相对于自身原有位置偏移 2.不会脱离文档流。

<html><head><title></title><style type="text/css">.box1{width:50px;height:50px;background-color: gray}.box2{width:50px;height:50px;background-color: red;}.box3{width:50px;height:50px;background-color: blue}</style></head><body><div class="box1";>box1</div><div class="box2">box2</div><div class="box3">box3</div></body></html>


box2样式修改为:.box2{width:50px;height:50px;background-color: red;position: relative;left: 10px;top:10px}


可以看到box2的偏移是根据其原来的位置的,同时box1并没有向下偏移,说明box2仍然在文档流之中,但是相对定位有一个特殊地方,box2会覆盖在box3上面。

0 0
原创粉丝点击