子类absolute相对父类不同position的定位

版权声明:本BLOG上原创文章未经本人许可,不得用于商业用途及传统媒体。网络媒体转载请注明出处,否则属于侵权行为。 https://blog.csdn.net/qq_22046267/article/details/84972162

在学习前端的时候遇到过一个问题:

当子类position为absolute时,父类的position 不同时子类会怎么定位.

直接上图好理解~

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

红色框框为父元素 position: absolute/relative/inherit/….

蓝色框框为子元素 position :absolute

 

 

 

扫描二维码关注公众号,回复: 4479789 查看本文章

各种情况:

1.position:fixed 子相对父定位    (父元素此时是相对浏览器窗口定位的,所以子元素相对父元素定位的话,也可以说是相对浏览器窗口定位的…)

2.position:absolute 子相对父定位

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

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

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

6.父元素设置position 子元素相对祖父元素定位

 

最后附上github地址,代码在链接中

gayhub地址

猜你喜欢

转载自blog.csdn.net/qq_22046267/article/details/84972162