解决图片上的文字定位不生效的问题

拉到下面有总结

html代码：

<div class="odiv">
        <img src="图片地址">
        <div class="wan">3000万</div>
        <h4>「欧美Live」惊艳现场版，嗨到停不下来!</h4>
    </div>

css代码：（让‘3000万’文字定位到右上角，正常来说是可以实现的）

/* 注意第一个div标签 */
   div {  
            /* display: block; */
            position: relative; // 父元素设置相对定位
            width: 300px;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .wan {
            display: block;
            position: absolute; // 子元素设置绝对定位
            top: 0; // 上
            right: 0; // 右
            color: blue;
        }

        h4 {
            font-weight: lighter;
        }

出现问题：文字没有定位到右上角，定位失效。

总结：

经过实践，问题定位到div标签，把文字的 div 标签改为 span 标签，即可解决。或者是在第一个div标签加上类名，在类里添加相对定位，也可解决文字定位不生效的问题。

当实际代码里面嵌套成分复杂的时候，建议为子元素多包裹一层div