css中绝对定位中的left和top属性 

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

posted @ 2013-03-03 19:05  chaoguo1234  阅读(1717)  评论(0)  编辑  收藏  举报