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>

 

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