首页 > 其他分享 >解决图片上的文字定位不生效的问题

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

时间:2022-10-18 15:24:03浏览次数:45  
标签:文字 定位 标签 生效 div display block 图片

拉到下面有总结

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;
        }

image

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

总结:

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

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

标签:文字,定位,标签,生效,div,display,block,图片
From: https://www.cnblogs.com/fangcunjian/p/16802644.html

相关文章