CSS position 属性分析

最新推荐文章于 2025-09-08 18:45:43 发布

原创最新推荐文章于 2025-09-08 18:45:43 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#css

CSS 专栏收录该内容

2 篇文章

订阅专栏

position是css重要的属性，通过设置position，可以把元素放置到一个静态的、相对的、绝对的或者是固定的位置中。
position有以下五个属性（在某些资料网站中，可能只会介绍前四个属性）。

值	描述
static	默认值，设置了static的属性，没有定位，它会出现在正常的流中。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的左侧位置添加 20 像素。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。它的实际作用是不论窗口滚动与否，元素都会留在指定的位置。
inherit	规定应该从父元素继承 position 属性的值。

下面我们写几个例子主要观察一下relative与absolute的用法：

static 就不在演示，它是position的默认属性值，它只会让元素按照正常的位置显示。我们来看看relative值的显示效果;

position: relative;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
        h2.move_left
        {
            position:relative;
            left:-50px;
        }

        h2.move_right
        {
            position:relative;
            left:50px;
        }
        </style>
    </head>

    <body>
        <h2>这是位于正常位置的标题</h2>
        <h2 class="move_left">这个标题相对于其正常位置向左移动</h2>
        <h2 class="move_right">这个标题相对于其正常位置向右移动</h2>
        <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
    </body>

</html>

=== 执行效果 ===
这里写图片描述

position: absolute;

absolute生成绝对定位，absolute在没有设定TRBL(即top/right/bottom/left)值时是根据父级对象的坐标作为初始点的，当设定TRBL值后就会根据浏览器左上角作为原始点。实例如下：

部分代码借鉴 http://www.jb51.net/css/68072.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            html,body,div{
                margin:0;
                padding:0;
                list-style:none;
            }
            .center{
                margin:30px;
                border:#999999 solid 10px;
                width:400px;
                height:300px;
            }
            .div1{
                width:200px;
                height:200px;
                background:#0099FF;
                position:absolute;
                left:0px;
                top:0px;
            }
            .div2{
                width:400px;
                height:300px;
                font-size:30px;
                font-weight:bold;
                color:#fff;
                background:#FF0000;
            }
        </style>
    </head>
    <body>
        <div class="center">
            <div class="div1"></div>
            <div class="div2">position:absolute定位测试</div>
        </div>
    </body>
</html>

=== 执行效果 ===
这里写图片描述

relative与absolute的配合

在网页的设计过程中经常会用浮动来对页面进行布局，但是浮动所带来的不确定因素非常多（例如：IE浏览器的兼容问题）。相对来说，在有些布局中定位使用会更加简单、快捷、兼容性更好（relative与absolute相结合来使用），如下面实例所示：

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
        <style type="text/css">
        div{
            border:2px red solid;
        }
        #box1{
            width:200px;
            height:200px;
            margin: 50px;
            background-color: #343434;
            position: relative;

        }
        #box2{
            width:99%;
            background-color: #676767;
              position: absolute;
            bottom: 0px;
        }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2">生活不止眼前的苟且，还有诗和远方的田野。</div>
        </div>
    </body>
</html>