html - 在div左上角添加数字

Question

我想在我的 div 的左上角添加一个数字，但到目前为止我所做的一切都没有正常工作。

这是我目前拥有的:

这是我想要的:

代码如下:

#Office365, #OneDrive {
	  height: 100px;
	  width: 16.259%;
	  display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    background-color: #F2F2F2;
}

<div class="row" id="firstAppRow">
        <div class="col-sm-2" id="Office365" style="padding-top: 20px; font-weight: bold;">
        <span>1</span>
        <div><img src="/TrainingResourceCenter/O365Training/PublishingImages/OVbiWcG.png" height="50px" width="50px" />
        <p>Office365</p>
        </div>
        </div>
        <div class="col-sm-2" id="OneDrive" style="padding-top: 20px; font-weight: bold;">
        <div><img src="/TrainingResourceCenter/O365Training/PublishingImages/wJAtQYP.png" height="40px" width="40px" />
        <p>OneDrive</p>
        </div>
    </div>
</div>

Answer 1

他，解决方案是对数字使用绝对位置。请注意，包含带有数字的标签的 block 将需要相对定位，以便数字相对于该 block 是绝对的。这是一个示例代码

 #Office365,#OneDrive{
    display: inline-block;
    margin-right: 2px;
    background-color: #F2F2F2;

    position:relative;
    border:1px solid black;
    padding: 0 50px;
    text-align: center;
    }

    #Office365 img,#OneDrive img{
    width:100px;
    height: auto;
    }

    .num{
    position: absolute;
    top: 5px;
    left: 5px;
    }

 <div class="row" id="firstAppRow">
        <div class="col-sm-2" id="Office365" style="padding-top: 20px; font-weight: bold;">
        <div><img src="https://png.icons8.com/color/1600/office-365.png" height="50px" width="50px" />
        <p>Office365</p>
          <span class="num">1</span>
        </div>
        </div>
        <div class="col-sm-2" id="OneDrive" style="padding-top: 20px; font-weight: bold;">
        <div><img src="https://bcpsodl.pbworks.com/f/1477585037/onedrive.png" height="40px" width="40px" />
        <p>OneDrive</p>
          <span class="num">2</span>
        </div>
    </div>
</div>