本篇內容介紹了“css中如何使用position與absolute屬性設置相對于父元素”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
有時候我們需要在父元素的容器內設置相對的絕對位置
要做到這一點需要把父元素的position屬性設置為relative，設置為relative之后不設置left和top屬性，這時候父元素雖然是relative的，但是還是在原來位置。 然后把子元素的位置position設置為absolute的，并設置其left，top，right，bottom屬性，這樣就是相對于父元素的絕對位置了。
如下html示例代碼：
<!doctype html>
<html>
<style type="text/css">
#father {
position: relative;
width:600px;
margin:auto;
height:400px;
border:1px solid red;
}
#son1 {
position: absolute;
top: 0;
background:#f0f0f0;
}
#son2 {
position: absolute;
bottom: 0;
background:blue;
}
</style>
<body>
<div id="father">
<div id="son1">I am son1</div>
<div id="son2">I am son2</div>
</div>
</body>
</html>“css中如何使用position與absolute屬性設置相對于父元素”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
