絕對定位：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中相對定位和絕對定位的介紹與使用的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。