Bootstrap: создание изображений в одной строке

Question

Я хочу создать в игре элемент списка с фоном, держателем значка со значком внутри, заголовком и описанием, а также до трех ресурсов. Я работаю с Bootstrap и подумал, что использование контейнера-жидкости со строкой внутри может работать, но изображения располагаются друг под другом (см. Изображение) []

Я не хочу использовать такие вещи, как position: absolute, или установить значение поля как -250% 0 0 0. Есть ли способ сказать, что изображения следует размещать друг над другом, а не друг под другом?

Пока это мой HTML код:

.resourceHolder
{
	position: relative;
}

.resourceIcon
{
	position: relative;
}

.nopadding 
{
   padding: 0 !important;
   margin: 0 !important;
}

.iconHolder
{
	position: relative;
	width: 100%;
}

.icon
{
	position: relative;
    width: 65%;
}

.bannerText
{
    font-family: FenwickWood;
    color: #0062cc;
	margin: 0 0 20% 0;
	-webkit-text-stroke-width: 1px;
  	-webkit-text-stroke-color: beige;

    pointer-events: none;
}

<div class="container-fluid">
	<img class="background" src="assets/UI/window/wood_plank1.svg">
  <div class="row">
    <div class="col-sm-3 nopadding">
		<img class="iconHolder" src="assets/UI/window/grid4L.svg">
		<img class="icon" src="assets/Terrain_Medieval/Decor/villageSmall03.png">
    </div>
	<div class="col-sm-3 nopadding">
		<h1 class="bannerText">Village</h1>
	</div>
	<div class="col-sm-2 nopadding">
		<img class="resourceHolder" src="assets/UI/window/grid4L.svg">
		<img class="resourceIcon" src="assets/Icons/gold_coins.png">
	</div>
  </div>
</div>

Answer 1

Вы можете использовать CSS Макет сетки и поместить оба изображения в одну и ту же ячейку.

Извлечь этот jsfiddle: https://jsfiddle.net/dscmr7oz/.

Также, когда вы говорите, что не хотите использовать такие вещи, как position: absolute ", почему это так? Это совершенно законный способ поставить вещи друг на друга. Знаете ли вы, что если вы поместите элемент с абсолютным позиционированием внутри относительно позиционированный элемент, что внутренний элемент абсолютно позиционирован относительно его родителя?

.container {
    position: relative;
}

.container .bottom-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
{

.container .top-image {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2
}