css案例学习之relative与absolute

代码

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>absolute属性</title>
    <style type="text/css">
    body {
        margin: 20px;
        font-family: Arial;
        font-size: 12px;
    }
    
    #father {
        background-color: #a0c8ff;
        border: 1px dashed #000000;
        padding: 15px;
        position: relative;
    }
    
    #father div {
        background-color: #fff0ac;
        border: 1px dashed #000000;
        padding: 10px;
    }
    
    #block2 {
        position: absolute;
        top: 0px;
        right: 0px;
    }
    </style>
</head>

<body>
    <div id="father">
        <div>Box-1</div>
        <div id="block2">Box-2</div>
        <div>Box-3</div>
    </div>
</body>

</html>

说明

relative是相对于浏览器定位的，absolute是相对于relative定位的。

它们都要结合top、right、left、bottom属性来使用。

代码

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>absolute属性</title>
    <style type="text/css">
    body {
        margin: 20px;
        font-family: Arial;
        font-size: 12px;
    }
    
    #father {
        background-color: #a0c8ff;
        border: 1px dashed #000000;
        padding: 15px;
        position: relative;
        top:20px; /*相对于浏览器*/
        left:10px;
    }
    
    #father div {
        background-color: #fff0ac;
        border: 1px dashed #000000;
        padding: 10px;
    }
    
    #block1 {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    #father2 {
        background-color: #a0c8ff;
        border: 1px dashed #000000;
        padding: 15px;
        position: relative;
        top:10px; /*相对于浏览器，不过基于现有的位置。*/
    }
    
    #father2 div {
        background-color: #fff0ac;
        border: 1px dashed #000000;
        padding: 10px;
    }
    
    #block2 {
        position: absolute;
        top: 0px;
        right: 0px;
    }
    </style>
</head>

<body>
    <div id="father">
        <div>Box-1</div>
        <div id="block1">Box-2</div>
        <div>Box-3</div>
    </div>

    <div id="father2">
        <div>Box-1</div>
        <div id="block2">Box-2</div>
        <div>Box-3</div>
    </div>
</body>

</html>

说明

absolute永远是基于父relative元素定位。relative基于现有的位置，基于浏览器定位。

posted @ 2015-11-26 17:31  TBHacker  阅读(257)  评论(0)    收藏  举报