CSS定位详解-优快云博客

本文通过一个具体的HTML示例详细解析了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 runat="server">
    <title></title>
    <style type="text/css">
    body,ul,div,li
    {
        padding:0px 0px 0px 0px;
        margin:0px 0px 0px 0px;
    }

    #container
    {
        width:300px;
        height:300px;
        background-color:#efefef;
        position:relative;
        border:1px solid #000000;
    }

    #left
    {
        float:left;
        position:absolute;
        border:1px solid #ff0000;
        bottom:23px;
        left:0px;
        right:80px;
    }

    #right
    {
        float:right;
        position:absolute;
        border:1px solid #ff0000;
        right:10px;
        bottom:23px;
    }

    #bottom
    {
        width:100%;
        height:23px;
        border:1px solid #ff0000;
        bottom:0px;
        position:absolute;
        left:0px;
    }
    .text
    {
        border:1px solid #000000;
        width:100%;
        margin:2px 2px 2px 2px;
        position:absolute;
        bottom:0px;
    }

    /*button 不用绝对地位，在手机浏览器上将会错位*/
    .button
    {
        border:1px solid #000000;margin:2px 2px 2px 2px;
        position:absolute;
        bottom:0px;
        right:0px;
     }
    </style>
</head>
<body>

     <div id="container">
        <div>
            <div id="left"><input type="text" class="text"/></div>
            <div id="right"><input type="button" value="button" class="button"/></div>
        </div>