定位的方法有很多种,它们分别是静态(static),绝对定位(absolute),固定(fixed),相对定位(relative)。针对你的问题,这里重点介绍相对定位:

1、相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

2、相对定位需要达成几个条件:

1)参照物:相对谁来进行定位,如何确定参照物;
2)相对的方式是什么:左右偏移、上下偏移等;
3)偏移的量是多少;


看一下下面的例子:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title id="title">ceshi</title>
    </head>
    <style>
    #d1{width: 500px;height: 300px;background:red;}
    #d2{width: 200px;height: 100px;background:blue;}
    </style>
    
    <body>
        <div id="d1" style="position: relative;margin-left: 100px;">
            <div id="d2" style="position: absolute; left: 50px;"></div>
        </div>
    </body>  
</html>

 

 

传送门:详细见百度知道

 

--- ⌈ THE END ⌋ ---