Css绝对定位position

                                                                                Css绝对定位position

1、使用条件
    通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。

2、如下
    div#in_1{ position: absolute; right: 20px; top: 30px; }     这里定义了距离父级右侧距离为20px,距离父级上边距离为30px
    div#in_2{ position: absolute; left: 40px; bottom: 10px; }   这里定义了距离父级左侧距离为40px,距离父级下边距离为10px

3、注意
    left(左)和right(右)在一个对象只能选一种定义,bottom(下)和top(上)也是在一个对象只能选一种定义。

4、Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#out{
            border: 1px solid black;
            position: relative;
            width: 400px;
            height: 400px;
            margin: 40px;
        }
        div#in_1{
            border: 1px solid red;
            position: absolute;
            right: 20px;
            top: 30px;
        }
        div#in_2{
            border: 1px solid #7fffd4;
            position: absolute;
            left: 40px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="out">
        我是最外面的DIV out
        <div id="in_1">
            我是里面的DIV in_1
        </div>
        <div id="in_2">
            我是里面的DIV in_2
        </div>
    </div>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章