<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。
