Bootstrap4利用定位,实现图片或文字的叠加效果


发布时间:2020-03-09 15:51    作者: Uncle Hui   已过去:4 月,4 周   阅读总量:254 已被赞:0


方法:将DIV的position设置为relative,利用绝对定位实现同级元素叠加,也可以用Float浮动让文字叠加在图像上方

<div style="position:relative">
   <img src="" />
   <span style="position:absolute; left:0; top:50%;">这里显示文字</span>
</div>

 实践:

 <a href="" class="d-block hui_h ">
<div class="card" style="width: 270px;height: 148px">
  <img class="card-img-top d-block w-100 rounded" src="images/k1.jpg" alt="" style="position:relative">
      <span class="badge badge-warning" style="position:absolute; left:-2%; top:3%;">新课</span>
  <div class="card-body">
    <h5 class="card-title " >前端框架及项目面试-聚焦Vue、React、Webpack</h5>
    <p class="clearfix mb-0 text-muted"><span class="float-left">中级 463人</span> <span class="float-right">13人评价</span></p>
    <p >¥396</p>
  </div>
</div>
    </a>

 效果:

实战二 :给文字右上角添加一个小红点

<li class="nav-item">
    <a class="nav-link" href="#" style="position: relative">
        金职位
        <i class="fahui"></i>
    </a>
</li>

 

.fahui{
    display:block;
  background:#f00;
  border-radius:50%;
  width:8px;
  height:8px;
  top:8px;
  right:0px;
  position:absolute;
}

效果:

点赞

0




登陆后方可评论