CSS中相對定位和絕對定位的示例分析

這篇文章主要為大家展示了“CSS中相對定位和絕對定位的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS中相對定位和絕對定位的示例分析”這篇文章吧。

CSS 相對定位
設置為相對定位的元素框會偏移某個距離。元素仍保持其未定位前的形狀和原本所占的空間。
對元素進行相對定位，通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。
如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。
如果 left 設置為 30 像素，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動。

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

注意，在使用相對定位時，元素仍然占據(jù)原來的空間。因此，移動元素會導致它覆蓋其它框。

CSS 絕對定位
設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位。
    元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。
    元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
絕對定位使元素的位置與文檔流無關，因此不占據(jù)空間。這一點與相對定位不同，
相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：

#box_absolute {
    position: absolute;
    left: 30px;
    top: 20px;
}

絕對定位的元素的位置“相對于”最近的已定位祖先元素。如果不存在已定位的祖先元素，
那么“相對于”最初的包含塊。根據(jù)用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。
與絕對定位不同，相對定位的元素的位置是“相對于”元素在文檔中的初始位置。
因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。
可以通過設置 z-index 屬性來控制這些框的堆放次序。

以上是“CSS中相對定位和絕對定位的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！