Html - a标签如何包裹Div

本文详细解释了如何使用a标签作为遮罩覆盖div元素,通过将div设置为相对定位,a标签设置为绝对定位并调整层级、尺寸等属性实现效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

a标签如何包裹Div?

其实应该将思路转变为将a标签作为一个遮罩来覆盖div。

做法是将a标签放置在该div下,通过将div进行相对定位【position:relative】

将a标签进行绝对定位【position:absolute】 + 层级提升【z-index:199930710】 + 高度宽度和div同步【height:100%;width:100%】

示例代码:

HTML:

<div class="mui-col-xs-10" id="go_set">    
    <a href="#set" class="go_ahref">
        <div class="media">
            <div class="media-left">
                <a href="#"><img src="../Images/tab1-1.png" width="60px" alt="" /></a>
            </div>
            <div class="media-body text-left">
                    <h4 class="media-heading">商户收包裹</h4>
                    <p class="media-middle">商户收包裹商户收包裹商户收包裹商户收包裹</p>
            </div> 
        </div>     
    </a>
</div>    

CSS:

.go_ahref{position: absolute;z-index: 19930710;width: 100%;height: 100%;}
.mui-col-xs-10{position:relative}

 

转载于:https://www.cnblogs.com/CyLee/p/5333257.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值