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

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

<html>
    <head>
        <title>Absolute Positiontitle>
        <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">文本divdiv>
        <div class = "three">div>
    body>
html>

 

css中绝对定位的元素left和top属性受到原来为脱离文档流之前的位置的影响,代码如下:

运行结果:

css中绝对定位中的left和top属性_第1张图片

从运行结果可以看到,gold色的div位于绿色边框的div下面。

这是因为在样式中虽然没有给出gold色div框的top的值,但是如果没有被绝对定位,也就是gold色的div位于正常流的时候,它将离它现在的包含块(也就是body)上内边距(padding上边界)102px(绿色div的高100px + 边框宽2px),因此,虽然top的值未被给出,实际上它的值就是102px。

posted @ 2013-03-03 19:05 chaoguo1234 阅读( ...) 评论( ...) 编辑 收藏

你可能感兴趣的:(css中绝对定位中的left和top属性)