给图片的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、