smelikecat

导航

定位position

css属性，position的默认值static，只有有这个属性的元素的默认值都是static.

 

position:relative;

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

position:absolute;

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

浏览器的高度一般不需要去定义一个固定值，它本身会自动根据内容的高度变化，而浏览器的宽度和高度就是body元素的宽度高度。

一般我们进行使用position属性进行绝对定位时，我们一般不会是直接就在body内就写一个div来相对于body定位，而会是在一个有指定的宽度和高度值的div容器内嵌套那个需要定位的div。同时，你的外层div的position属性必须是absolute/relative。这样子你内层的div进行绝对定位时，才能以外层的这个div作为父元素进行定位。代码如下：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>postion-absolute</title>
        <style type="text/css">
            body{margin:0;padding:0;}
            
            .outside
　　　　　　　{
　　　　　　　　width:400px;height:200px;background-color:red;position:relative;/×position的值也可以为absolute×/
　　　　　　　}
            .inside
            {

                background-color:blue;
                width:60%;
                height:20%;
                position:absolute;
                left:10%;
                top:10%;
            }
        
        </style>
    </head>
    <body>
        <div class="outside">
            <div class="inside">I am a absolute position div.</div>
        </div>
    
    </body>

</html>

 

 

 

posted on 2014-03-15 23:31  smelikecat  阅读(297)  评论(0)  编辑  收藏  举报