Html 引导：在同一行上创建映像

我想在一个游戏中创建一个列表项，它有一个背景、一个带有图标的图标文件夹、一个标题和描述以及最多三个资源。我正在使用Bootstrap，并认为使用一个容器流体，其中有一行可能会起作用，但图像是放在彼此下面的（参见图像）[]

我不想使用position:absolute之类的东西，也不想将边距设置为-250%0。有没有办法说图像应该放在彼此的上面，而不是放在彼此的下面

这是迄今为止我的HTML代码：

.resourceHolder
{
位置：相对位置；
}
.resourceIcon
{
位置：相对位置；
}
没有
{
填充：0！重要；
边距：0！重要；
}
伊肯霍尔德先生
{
位置：相对位置；
宽度：100%；
}
偶像
{
位置：相对位置；
宽度：65%；
}
.bannerText
{
字体系列：芬威克伍德；
颜色：#0062cc；
利润率：0.20%0；
-webkit文本笔划宽度：1px；
-webkit文本笔划颜色：米色；
指针事件：无；
}

村庄

您可以使用CSS网格布局，将两个图像放在同一单元格中

签出此JSFIDLE:

另外，当你说你不想使用像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
}

---

如果你可以做一个stackblitz程序，我们可以帮助你，或者发布我可以为你做的图片是的，这就是我要找的：）我忘了添加一个家长，我想添加位置：绝对是一种“欺骗”，一开始为了得到好的结果，一旦你在彼此下面添加多个元素，结果就会完全错误