css絕對定位和相對定位例項。
阿新 • • 發佈：2019-01-06
先寫一段簡單程式碼：<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkrel="stylesheet"href="try.css"><title>Document</title></head>< 
相對定位是相對於頁面的。絕對定位是相對於元素最近的已定位的祖先元素（即是設定了絕對定位或者相對定位的祖先元素）。如果元素沒有已定位的祖先元素，那麼它的位置則是相對於最初的包含塊（body）。而如果在.try1中加入relative, 如果在.try1中加入absolution,可以看到 可以看到
由此可見絕對定位本身與文件流無關，因此不佔空間，普通文件流中的元素的佈局就當絕對定位的元素不存時一樣，所以 它們可以覆蓋頁面上其他的元素，且可以通過z-index屬性來控制這些層的對方順序（就像車在高架橋上一樣橋上和橋下互不影響）。而相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框（不能撞車！）。
相對定位是相對於頁面的。絕對定位是相對於元素最近的已定位的祖先元素（即是設定了絕對定位或者相對定位的祖先元素）。如果元素沒有已定位的祖先元素，那麼它的位置則是相對於最初的包含塊（body）。而如果在.try1中加入relative, 如果在.try1中加入absolution,可以看到 可以看到 由此可見絕對定位本身與文件流無關，因此不佔空間，普通文件流中的元素的佈局就當絕對定位的元素不存時一樣，所以 它們可以覆蓋頁面上其他的元素，且可以通過z-index屬性來控制這些層的對方順序（就像車在高架橋上一樣橋上和橋下互不影響）。而相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框（不能撞車！）。