1. 程式人生 > >子類absolute相對父類不同position的定位

子類absolute相對父類不同position的定位

在學習前端的時候遇到過一個問題:

當子類position為absolute時,父類的position 不同時子類會怎麼定位.

直接上圖好理解~

灰色框框為祖父元素 position:relative

紅色框框為父元素 position: absolute/relative/inherit/….

藍色框框為子元素 position :absolute

 

 

 

各種情況:

1.position:fixed 子相對父定位    (父元素此時是相對瀏覽器視窗定位的,所以子元素相對父元素定位的話,也可以說是相對瀏覽器視窗定位的…)

2.position:absolute 子相對父定位

3.父position:static 子元素相對外面的祖父元素定位

4.position:relative 子元素相對父定位

5.position:inherit 父元素繼承了祖父元素的position:relative 所以子元素相對父定位

6.父元素設定position 子元素相對祖父元素定位

 

最後附上github地址,程式碼在連結中

gayhub地址