css中相對(duì)定位和絕對(duì)定位使用方法

下面主要為大家介紹一下三種常見的定位。

1、position:relative（相對(duì)定位）

相對(duì)定位就是相對(duì)于原來自己的位置做出對(duì)應(yīng)的變化,。

需要注意的是：元素移動(dòng)后會(huì)占有原來的位置(這是relative定位最為重要的一點(diǎn))

代碼：

<style>
        * {
            margin: 0;
            padding: 0;
            /* 這里清除掉所有外邊距和內(nèi)邊距,
            沒有實(shí)質(zhì)意義,只是方便觀察 */
        }
        
        .pink {
            width: 80px;
            height: 80px;
            background-color: pink;
        }
        
        .purple {
            width: 80px;
            height: 80px;
            background-color: purple;
        }
        
        .green {
            width: 80px;
            height: 80px;
            background-color: greenyellow
        }
    </style>

運(yùn)行結(jié)果如下：

當(dāng)給子盒子如下定位屬性時(shí)：

 .purple {
            position: relative;
            top: 0;
            left: 80px;
            /* 上面給這個(gè)盒子添加了相對(duì)定位,
            并讓它相對(duì)原來的自己移動(dòng)了80px的距離 */
            width: 80px;
            height: 80px;
            background-color: purple;
        }

如圖：

頁面變成了這樣，這也驗(yàn)證了最重要的一點(diǎn)：元素移動(dòng)后會(huì)占有原來的位置，否則綠色的盒子就會(huì)頂上去。

2、ponsition:absolute（絕對(duì)定位）

絕對(duì)定位是以自己父級(jí)元素做出的位置改變，如果父級(jí)元素有position屬性，以父級(jí)元素為基準(zhǔn)做出相應(yīng)的移動(dòng)；如果父級(jí)元素沒有position屬性(或者沒有父級(jí)元素)，以瀏覽器為基準(zhǔn)做出相應(yīng)的移動(dòng)。

需要注意的是：元素移動(dòng)后不會(huì)占有原來的位置。

代碼：

.purple {
            position: absolute;
            top: 160;
            left: 80px;
            /* 這里的紫色盒子沒有父級(jí)元素
            所以是以瀏覽器為基準(zhǔn)的定位 */
            width: 80px;
            height: 80px;
            background-color: purple;
        }

如圖：

顯然綠色盒子頂了上去，這個(gè)結(jié)果就驗(yàn)證了絕對(duì)定位：元素移動(dòng)后不會(huì)占有原來的位置。

3、fixed（固定定位）

固定定位的位置是相對(duì)于整個(gè)頁面的位置，與是否有父級(jí)元素?zé)o關(guān)，同樣，固定定位也不會(huì)保留位置。

以上就是關(guān)于css中定位的總結(jié)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！