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>

運行結果如下：

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

 .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中定位的總結的詳細內容，更多請關注億速云其它相關文章！