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

最新推荐文章于 2022-11-23 16:24:04 发布

chaoguo1234

最新推荐文章于 2022-11-23 16:24:04 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/chaoguo1234/article/details/86176703

版权

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 阅读( ...) 评论( ...) 编辑收藏

chaoguo1234

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css中绝对定位中的left和top属性

css中绝对定位中的left和top属性 &lt;html&gt; &lt;head&gt; &lt;title&gt;Absolute Position&lt;/title&gt; &lt;style type = "text/css"&gt; /*body具有红色边框，宽度30...
复制链接

扫一扫