<html> <head> <title>Absolute Position</title> <style type = "text/css"> /*body具有红色边框，宽度300px，高度300px*/ body { border: 1px solid red; width: 300px; height: 300px; } /*被绝对定位,颜色为silver*/ div.one { background: silver; width: 100px; height: 100px; position: absolute; } /*没有被绝对定位，有绿色边框*/ div.two { width: 250px; height: 100px; border: 2px solid green; text-align: center; } /*被绝对定位，颜色为gold*/ div.three { background:gold; width: 100px; height: 100px; position: absolute; left: 60px; /*设置了left的值，未设定top*/ } </style> </head> <body> <div class = "one"></div> <div class = "two">文本div</div> <div class = "three"></div> </body> </html>
css中绝对定位的元素left和top属性受到原来为脱离文档流之前的位置的影响，代码如下:
运行结果:
从运行结果可以看到，gold色的div位于绿色边框的div下面。
这是因为在样式中虽然没有给出gold色div框的top的值，但是如果没有被绝对定位，也就是gold色的div位于正常流的时候，它将离它现在的包含块(也就是body)上内边距(padding上边界)102px(绿色div的高100px + 边框宽2px),因此，虽然top的值未被给出，实际上它的值就是102px。