CSS中定位的示例分析

這篇文章將為大家詳細講解有關CSS中定位的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

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

下面為代碼演示部分:

<style>
        * {
            margin: 0;
            padding: 0;
            /* 這里清除掉所有外邊距和內邊距,
            沒有實質意義,只是方便觀察 */
        }
        
        .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;
        }

顯然綠色盒子頂了上去,這個結果就驗證了絕對定位:元素移動后不會占有原來的位置.

3.fixed固定定位:固定定位的位置是相對于整個頁面的位置,與是否有父級元素無關,同樣,固定定位也不會保留位置

關于“CSS中定位的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。