版权声明:本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地址,代码在链接中