大家知道css的position absolute默認是根據document來設置的，比如position:absolute后設置left:0;top:0這時候元素會顯示到頁面的左上角。

有時候我們需要在父元素的容器內設置相對的絕對位置。比如下面本站視頻教程頁面的效果圖.

上圖中的視頻圖標是一個絕對位置，它是相對于父元素的。

要做到這一點需要把父元素的position屬性設置為relative，設置為relative之后不設置left和top屬性，這時候父元素雖然是relative的，但是還是在原來位置。 然后把子元素的位置position設置為absolute的，并設置其left，top，right，bottom屬性，這樣就是相對于父元素的絕對位置了。

如下html示例代碼，將鼠標放置代碼區域右上角會有試試效果的提示，點擊可以看到實際效果：

#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;

}

I am son1I am son2

總結

以上是生活随笔為你收集整理的css position的父级,css position absolute 相对于父元素的设置方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。