關于CSS中定位的小結

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

我要評論

CSS中定位有四種在不同的場景下有不同的作用，本文給大家介紹關于CSS中定位的相關知識，通過實例代碼截圖給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧

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

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

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

1.position:relative相對定位:顧名思義,相對定位就是相對于原來自己的位置做出對應的變化, 需要注意的是 :元素移動后會占有原來的位置(這是relative定位最為重要的一點)

下面為代碼演示部分:

<style>
        * {
            margin: 0;
            padding: 0;
            /* 這里清除掉所有外邊距和內(nèi)邊距,
            沒有實質(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>

這里定義了三個div并給了相應的顏色,運行結果如下

在這里插入圖片描述

當給子盒子如下定位屬性時

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

在這里插入圖片描述

頁面變成了這樣,這也驗證了最重要的一點—元素移動后會占有原來的位置
否則綠色的盒子就會頂上去

2.ponsition:absolute絕對定位:絕對定位是以自己父級元素做出的位置改變,如果父級元素有position屬性,以父級元素為基準做出相應的移動,如果父級元素沒有position屬性(或者沒有父級元素),以瀏覽器為基準做出相應的移動. 需要注意的是 :元素移動后不會占有原來的位置.
下面為代碼演示

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

在這里插入圖片描述