Html CSS：在div容器的底部放置一个div容器

我的意图是将一个div容器放在一个div容器中，但它不起作用。我的div容器应该放在底部，它粘在整个页面的底部

.info容器{
显示器：flex；
保证金：0自动；
最大宽度：450像素；
最大高度：400px；
宽度：100%；
身高：100%；
盒影：0px 0px 38px 0px rgba（0,0,0,0.36）；
背景颜色：黄色；
}
div.info-header{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
宽度：470px；
背景：url（'../img/infoheader.png'）不重复；
背景位置：自动；
高度：100px；
框大小：边框框；
}
div.info-header h3{
字体系列：'SignPanter'，无衬线！重要；
文字装饰：无；
字体大小：32px；
颜色：白色；
字号：200；
文本阴影：1px 1px#7474；
文本对齐：居中；
}
div.info-bottom-text:悬停{
颜色：白色；
文本阴影：1px 1px#7474；
}
.info底部{
显示器：flex；
对齐项目：柔性端；
位置：绝对位置；
底部：0px；
}

洛桑托斯国际机场
党卫军
sss

设置为外部div set stlye as

position: relative;

对于内部div，将样式设置为

  position: absolute;
    bottom: 0;

---

诀窍是将所有内容包装在相对定位的元素中，该元素是外部

.info容器的直接子元素

这可以从下面的代码中看出，我使用简单的规则
position:relative
创建了类
info包装器


.info容器{
显示器：flex；
保证金：0自动；
最大宽度：450像素；
最大高度：400px；
宽度：100%；
身高：100%；
盒影：0px 0px 38px 0px rgba（0,0,0,0.36）；
背景颜色：黄色；
}
div.info-header{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
宽度：470px；
背景：url（'../img/infoheader.png'）不重复；
背景位置：自动；
高度：100px；
框大小：边框框；
}
div.info-header h3{
字体系列：'SignPanter'，无衬线！重要；
文字装饰：无；
字体大小：32px；
颜色：白色；
字号：200；
文本阴影：1px 1px#7474；
文本对齐：居中；
}
div.info-bottom-text:悬停{
颜色：白色；
文本阴影：1px 1px#7474；
}
.info底部{
显示器：flex；
对齐项目：柔性端；
位置：绝对位置；
底部：0px；
}
.info包装器{
位置：相对位置；
}

洛桑托斯国际机场
党卫军
sss
信息容器
应具有
位置：相对

.info-container {
  position: relative;
  display: flex;
  margin: 0 0 0 auto;
  max-width: 450px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
  background-color: yellow;
}

div.info-header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 470px;
  background: url('../img/infoheader.png') no-repeat;
  background-position: auto auto;
  height: 100px;
  box-sizing: border-box;
}

div.info-header h3 {
  font-family: 'SignPanter', sans-serif !important;
  text-decoration: none;
  font-size: 32px;
  color: white;
  font-weight: 200;
  text-shadow: 1px 1px #747474;
  text-align: center;
}

div.info-bottom-text:hover {
  color: white;
  text-shadow: 1px 1px #747474;
}

.info-bottom {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0px;
}