<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="Untitled-4.css"> <title>框框</title> </head> <body> <div class ="box" id="one">One</div> <div class ="box" id ="two"> Two</div> <div class ="box" id ="three"> Three </div> <div class ="box" id ="four">Four</div> </body> </html>
.box { display:inline-block ; display:100px; width:100px; background:red; color: white; } #two { position: relative; top: 20px; left: 20px; background: blue; }
三种定位的不同效果
relative定位-效果图
元素根据文档的正常流进行定位。然后根据top、right、bottom、和left的值相对于自身进行偏移。偏移量不会影响任何其他元素的位置。
fixed定位-效果图
元素从正常的文档流中删除，并且在页面布局中不为元素创建空间。使用top、right、bottom、left等属性窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
absolute定位-效果图
元素从正常的文档流中删除，并且在页面布局中不为元素创建空间。它的位置相对于它最近的位置出现，否则，它相对于出事包含快。它的最终位置由top、right和bottom的值决定。当z-index的值不是auto时，这个值创建一个新的堆栈上下文。绝对定位盒子的边缘不会与其他边缘折叠。absolute是用来对容器进行绝对定位的，它完全可以抛弃容器原来的位置，放在页面上任意位置，游离在文档页面上。