给图片的right值设置为0,给文字设置float:right,为什么图片遮住了文字

Question

p{
            position:relative;
            margin:0 0 5px 0;
            word-break:break-all;
            overflow:hidden;
            padding-left: 35px;
        }
        
        p img{
            position:absolute;
            top:0px;
            width: 30px;
            height: 30px;
            border-radius: 50px;
            border: 1px solid #000;
        }
        .left img{ left:0;}
        .right img{ right:0;}
        .left span{ float:left; padding:5px; background:#FFC;}
        .right span{ float: right; padding:5px; background:green;}

<!--<p class="left" id="left">
            <img src="images/1.jpeg">
            <span></span>
        </p>
        <p class="right" id="right">
            <img src="images/2.jpeg">
            <span></span>
        </p>-->

Answer 1

由于你的img绝对定位了，所以它的位置好理解。另外，图片遮住文字，是由于img此时的z-index值比span大

Answer 2

浮动的z-index小于定位的z-index、