溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關CSS中絕對定位的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
與其說定位一個元素是定位元素自身的位置，不如說是元素的容器位置。為了能夠定位自己，它必須知道自己將相對于哪個父div 來定位。
下面的代碼展示了4個嵌套的 div ， .box-1 到 .box-3 僅僅通過 display: flex 和 margin: auto 來實現(xiàn)居中。 .box-4 沒有設置 margin ，處于文檔流中默認的位置。
<body> <div class="box-1"> <div class="box-2"> <div class="box-3"> <div class="box-4"></div> </div> </div> </div> </body>
所有元素都沒有設置 position 屬性
body {
display: flex;
}
.box-1,
.box-2,
.box-3 {
display: flex;
margin: auto;
}
.box-4在默認位置
元素要想定位自己，必須知道2件事：
通過 top, right, bottom, left 設置的值
相對于哪個父級元素來定位
當我們給 .box-4 添加 position: absolute 屬性后，發(fā)現(xiàn)它從普通文檔流中脫離出來了。在沒有設置位置屬性的情況下，它只是呆在默認位置，也就是父容器的左上角。
.box-4絕對定位時位置無偏移
通過添加 top: 0 和 left: 0 ，元素必須要知道哪個元素將作為定位的參考容器。 可以看到這里元素被定位到了屏幕左上角。 .box-4 會先檢查它的父容器是否設置了 position 屬性。一開始，它發(fā)現(xiàn) .box-3 沒有設置定位屬性，然后它就繼續(xù)往上一層 .box-2 和 .box-1 , 發(fā)現(xiàn)它們都沒有設置可用的 position 屬性 。
最終 .box-4 也沒能找到可以用于定位參考的父級元素，最后只能以 body 作為定位參考。 元素最終被定位在屏幕左上角：
.box-4絕對定位，所有父元素都未設置position屬性
當我們給 .box-1 設置 position: relative 后 , .box-4 發(fā)現(xiàn)有了可用的定位參考。并最終相對于 .box-1 實現(xiàn)了定位：
.box-4絕對定位，.box-1相對定位，.box-2和.box-3不變
一旦找到了可用的祖先元素， 其它元素將不再與它相關（比如 box2 和 box3）。 下面的圖片展示了分別給 .box-2 和 .box-3 設置 position:relative 之后的效果：
.box-4絕對定位，.box-2和.box-3相對定位
感謝各位的閱讀！關于“CSS中絕對定位的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
