溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“CSS中相對定位和絕對定位的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS中相對定位和絕對定位的示例分析”這篇文章吧。
CSS 相對定位
設置為相對定位的元素框會偏移某個距離。元素仍保持其未定位前的形狀和原本所占的空間。
對元素進行相對定位，通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。
如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。
如果 left 設置為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}注意，在使用相對定位時，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。
CSS 絕對定位
設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位。
元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。
元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，
相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_absolute {
position: absolute;
left: 30px;
top: 20px;
}絕對定位的元素的位置“相對于”最近的已定位祖先元素。如果不存在已定位的祖先元素，
那么“相對于”最初的包含塊。根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。
與絕對定位不同，相對定位的元素的位置是“相對于”元素在文檔中的初始位置。
因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。
可以通過設置 z-index 屬性來控制這些框的堆放次序。
以上是“CSS中相對定位和絕對定位的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
