css中相對定位與絕對定位的介紹與使用

一、position的四個值：static、relative、absolute、fixed。

絕對定位：absolute與fixed統稱為絕對定位

相對定位：relative

預設值：static

## 

二、 relative定位與absolute定位的差異

實例：

HTML程式碼：

##css程式碼：

1.position：relative；如果對一個元素進行相對定位，首先它將出現在他所在的位置。然後透過設定垂直或水平的位置，讓這個元素「相對於」它的原始起點進行移動。 （再一點，相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框）例如#mybox{position：relativ;left：20px;top:20px;}效果就是使這個層鄉下和向左移動了20px。

2.position：absolute；表示絕對定位，位置將依據瀏覽器左上角的0點開始計算，絕對定位使元素與文件流無關，因此不佔據空間。普通文檔流中元素的佈局就像絕對定位的元素不存在時一樣。它相對於最近的已定位的祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最先的包含塊。 （因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素並可以透過​​z-index來控制這些框的堆疊次序。z-index的值越高，框在堆中的位置就越高。某個元素的，那麼單純的absolute是不行的。正確的解決方法就是在元素的父級元素定義為position：relative；（這裡可以是祖父級，也可以是position：absolute；）需要絕對定位的元素設為position：absolute；這樣再設定top，right ，bottom，left的值就可以了，這樣其定位的參照標準就是父級的左上角padding的左上側。

以上是css中相對定位與絕對定位的介紹與使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！