Добавление номера в верхнем левом углу 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

Попробуйте назначить

position: relative; 

для # Office365 и #OneDrive.Также поместите изображения в эти div.

Затем присвойте

position: absolute;
left: 1px;
top: 1px;

диапазонам # Office365 и #OneDrive.

Answer 2

абсолютное значение против числа с плавающей запятой

.a {
  width: 200px;
  position: relative;
  border: 1px solid gray;
  margin-right:20px;
  display:inline-block;
  vertical-align:top;
}

.viaAbsolute {
  position: absolute;
  top:0;
  left: 0;
  padding: 3px;
  border: 1px solid red;
}

.viaFloat {
  float: left;
  padding: 3px;
  border: 1px solid red;
}

<div class="a">
  <span class="viaAbsolute">
    1
  </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>

<div class="a">
  <span class="viaFloat">
    1
  </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus rhoncus quam quis vestibulum. Cras eu mollis nisl. Pellentesque semper tincidunt placerat.
</div>

Answer 3

Он, решение будет использовать абсолютную позицию для чисел.Обратите внимание, что блоки, содержащие тег с номером, должны быть расположены относительно, чтобы числа были абсолютными для этого блока.Вот пример кода

 #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>