首先不给div设置定位，看看他们在网页中的位置
代码如下<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS中div定位</title><style type="text/css">.div1{height: 100px;width: 100px;border: 10px solid red;background-color: yellow;}.div2{height: 100px;width: 100px;border: 10px solid blue;background-color: yellow;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>
如下图所示，可以看到两个div在没使用定位的情况下显示的位置，我们可以知道div是个块元素，自动换行了
相对定位：首先给div2使用
代码如下<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS中div定位</title><style type="text/css">.div1{height: 100px;width: 100px;border: 10px solid red;background-color: yellow;}.div2{height: 100px;width: 100px;border: 10px solid blue;background-color: yellow;position: relative;top: 40px;left: 40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>
如下图所示，div2的位置分别偏移了左边和上边40个像素
绝对定位：现在给div2加绝对定位
代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS中div定位</title><style type="text/css">.div1{height: 100px;width: 100px;border: 10px solid red;background-color: yellow;}.div2{height: 100px;width: 100px;border: 10px solid blue;background-color: yellow;position: absolute;top: 40px;left: 40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>
如下图所示
绝对定位：现在给div绝对定位上边60px，左边60px，看执行结果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS中div定位</title><style type="text/css">.div1{height: 100px;width: 100px;border: 10px solid red;background-color: yellow;position: absolute;top: 60px;left: 60px;}.div2{height: 100px;width: 100px;border: 10px solid blue;background-color: yellow;position: absolute;top: 40px;left: 40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>
结果如下图所示，得出结论，绝对定位的定位点是父div左上角坐标（0，0），但是由于父div默认都会有内外边距，所以看起来会有点差距。
