html – 覆盖其他元素的元素

概述目前在我的页面上我有这个布局 <div class="card"> <div class="card-block"> <h4 class="card-title text-muted">UltimateWarrior15</h4> <h6 class="card-subtitle text-muted"> Adventurer car 目前在我的页面上我有这个布局

<div >    <div >        <h4 >ultimateWarrior15</h4>        <h6 >            Adventurer card        </h6>    </div>    <img data-src="holder.Js/100px180/?text=Image">    <div >        <div >            <label for="player-level-text" >Rank</label>            <div >                <label >D</label>            </div>        </div>    </div></div>

它给出了非常简单的结果

但我想要实现的是将排名值从类似输入的标签移动到某些图像资产,或者只是标记更大的字体,这将重叠像这样的图像

@L_404_1@

如何使用HTML和CSS实现这一目标？

样品
https://jsfiddle.net/46qnx1LL

解决方法 您可以通过简单的负边距实现此目的,例如： margin-top：-75px;.设置边框：无;和背景：透明;只有字体可见.现在你只需要应用text-align：right;到父母div,你的信是在右边.

这是一个例子：

.card-block .col-form-label {  display: none;}.card-block > .row > div {  text-align: right;}.card-block .text-muted {  border: none;  background: transparent;  Font-size: 4em;  Font-weight: bold;  margin-top: -75px;  color: black !important;}

<script src="https://cdnjs.cloudflare.com/AJAX/libs/holder/2.9.4/holder.min.Js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-Alpha.5/CSS/bootstrap.min.CSS" rel="stylesheet" /><div >  <div >    <h4 >ultimateWarrior15</h4>    <h6 >				Adventurer card			</h6>  </div>  <img data-src="holder.Js/100px180/?text=Image">  <div >    <div >      <label for="player-level-text" >Rank</label>      <div >        <label >D</label>      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 覆盖其他元素的元素全部内容，希望文章能够帮你解决html – 覆盖其他元素的元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。