这次讲模型的定位相对定位让元素相对于其原始位置进行定位元素原本占据的文档流空间依然保留不会被其他元素占据接下来我来举个例子先定义盒子的边框等信息表明位置表明方向!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title相对定位/title style img { width: 100px; height: 100px; } #img1 { border: 4px red solid; position: relative; } #img2 { border: 4px green solid; position: relative; top: 150px; } #img3 { border: 4px blue solid; position: relative; } /style /head body img src./img_src/photo1.jpg idimg1 img src./img_src/photo1.jpg idimg2 img src./img_src/photo1.jpg idimg3 /body /html效果如图所示绝对定位脱离文档流不保留原本的空间后续元素会填补空位最近设置了定位的父盒子接下来我再举个例子先建一个父盒子表明位置标明方向!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title绝对定位/title style .container { width: 400px; height: 400px; background-color: gray; left: 100px; top: 100px; } #div1 { width: 100px; height: 100px; background-color: red; position: absolute; left: 50px; top: 50px; opacity: 0.75; } #div2 { width: 75px; height: 75px; background-color: green; position: absolute; left: 20px; top: 20px; } /style /head body div classcontainer div iddiv1/div div iddiv2/div /div /body /html效果如图固定定位元素固定在窗口的指定位置滚动页面时位置不变也会脱离文档流不保留原始空间是这个固定的盒子想象成一个单独的图层其他图层怎么变化我们的位置依旧不变我举个例子!doctype html html head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title固定定位/title style div { width: 250px; height: 250px; background-color: red; margin-bottom: 50px; } #div3 { width: 200px; height: 200px; border-radius: 11px; background-color: green; position: fixed; left: 100px; top: 100px; } #div5 { width: 250px; height: 250px; border-radius: 22px; background-color: orange; position: fixed; left: 150px; top: 150px; } /style /head body div盒子1/div div盒子2/div div iddiv3盒子3(固定定位)/div !-- 绿色固定在窗口左上角 -- div盒子4/div div iddiv5盒子5(固定定位)/div !-- 橙色固定在窗口 -- div盒子6/div div盒子7/div div盒子8/div div盒子9/div div盒子10/div div盒子11/div div盒子12/div div盒子13/div div盒子14/div div盒子15/div div盒子16/div div盒子17/div div盒子18/div div盒子19/div div盒子20/div /body /html效果如下