Html 领奖台CSS：将元素放置在其div的底部

我正在尝试使用CSS和HTML创建一个讲台。我通过将

position:relative

添加到父亲和

position:absolute，实现了将讲台台阶定位在底部；底部：0

到步骤，但由于我想在步骤上方显示一个文本，因此在定位此文本时遇到问题

我的第一个建议是将文本和台阶放在一个div上，并绝对定位这个div，但是由于台阶的高度是其父亲的百分比，父亲需要有一个

高度：100%

属性，因此div解决方案无效

在此，我附上我的代码片段：

@font-face{
字体系列：DaggerSquare；
src:url（“font/podium font.woff”）格式（“woff”），url（“font/podium font.ttf”）格式（“truetype”）；
}
#领奖台{
宽度：100%；
保证金：0自动；
}
.主席台号码{
字体系列：DaggerSquare；
字体大小：粗体；
字号：4em；
颜色：白色；
}
.台阶容器{
宽度：100%；
位置：相对位置；
}
.步骤{
宽度：100%；
位置：绝对位置；
底部：0；
}
.bg蓝色{
背景色：#063b65；
}
#第一步{
身高：50%；
}
#第二步{
身高：35%；
}
#第三步{
身高：30%；
}
.都是{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

文本2
2.
文本1
1.
文本3
3.

无需使用

位置：绝对

只需使用flexbox和flex列即可

然后将文本div推到底部

@font-face{
字体系列：DaggerSquare；
src:url（“font/podium font.woff”）格式（“woff”），url（“font/podium font.ttf”）格式（“truetype”）；
}
#领奖台{
保证金：0自动；
显示器：flex；
}
.主席台号码{
字体系列：DaggerSquare；
字体大小：粗体；
字号：4em；
颜色：白色；
}
.台阶容器{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
.step container>div:第一个子级{
页边顶部：自动；
文本对齐：居中；
}
.步骤{
文本对齐：居中；
}
.bg蓝色{
背景色：#063b65；
}
#第一步{
身高：50%；
}
#第二步{
身高：35%；
}
#第三步{
身高：30%；
}

文本2
2.
文本1
1.
文本3
3.

正如已经指出的那样，您可能可以从头开始，将其结构做得更好。但是，如果您想保持原样，只需将包含文本的div赋予类，并赋予它们以下属性：

 position:absolute;
 bottom:70px;

---

请使用Stackoverflow中的HTML/CSS/JS代码段，以便我们能够复制/运行您的代码。@robinvrd抱歉，我以为它是自动显示的。如何将其添加到问题中？编辑器中的粗体、下划线、链接、代码等按钮旁边有一个按钮。您在

上定义
宽度：100%
。step container

即

col-md-4

（这意味着将宽度设置为页面的1/3），首先，这没有意义。我会从头开始给你一个答案。谢谢你，现在你可以运行代码段了，这正是我想要的。非常感谢您的回答和片段。