關(guān)于CSS中定位的小結(jié)

發(fā)布時(shí)間：2020-03-20 14:25:20 作者：Now_Sprouting

CSS中定位有四種在不同的場(chǎng)景下有不同的作用，本文給大家介紹關(guān)于CSS中定位的相關(guān)知識(shí)，通過(guò)實(shí)例代碼截圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

CSS中定位有四種在不同的場(chǎng)景下有不同的作用下面我就大體的介紹一下這四種定位.

static靜態(tài)定位:應(yīng)用的場(chǎng)景不多,這里不做介紹

下面主要介紹一下其他三種常見的定位

1.position:relative相對(duì)定位:顧名思義,相對(duì)定位就是相對(duì)于原來(lái)自己的位置做出對(duì)應(yīng)的變化, 需要注意的是 :元素移動(dòng)后會(huì)占有原來(lái)的位置(這是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>

這里定義了三個(gè)div并給了相應(yīng)的顏色,運(yùn)行結(jié)果如下

在這里插入圖片描述

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

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

在這里插入圖片描述

頁(yè)面變成了這樣,這也驗(yàn)證了最重要的一點(diǎn)—元素移動(dòng)后會(huì)占有原來(lái)的位置
否則綠色的盒子就會(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ì)占有原來(lái)的位置.
下面為代碼演示

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

在這里插入圖片描述