span的父元素也是span，且使用子绝父相后会出现子元素的位置比父元素低的情况，请问这是为什么？

Question

    <style>
        .a{
            font-size: 100px;
            position: relative;
        }
        .b{
            position: absolute;
            color: red;
            top: 0;
            left: 0;
        }
    </style>
    
    <span class="a">我<span class="b">我</span></span>

代码如上图所示，当.b的span元素作为.a的span的子元素并且应用子绝父相定位后，会出现以下图片的问题


随后我在.b中的span样式中加入了line-height：100px出现了这种情况


后来我在父元素的span样式中加入display：block/inline-block才能使这两个元素完全重叠，请问这是为什么？还有其他的解决方法吗？

Answer 1

只给父元素设置inline-block就可以了。
除非是类似span嵌套a，否则一般不会在内联元素中嵌套其他元素，这里边包含不同浏览器的差异和继承父元素样式的问题。