Html 表布局-文本不位于div的顶部

我用两个表格单元格创建了简单的布局。当我添加带有贴图的iframe时，红色div中的文本会移动到该贴图下，但我希望它保持在顶部。我做错了什么？ 多谢各位

HTML:

  <div class="container">
  <div class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
  </div>
  <div class="block">
      text
  </div>
</div>

---

尝试添加

垂直对齐：顶部用于“.block”


.container{
显示：表格；
宽度：100%；
身高：100%；
位置：绝对位置；
}
.地图{
背景颜色：蓝色；
显示：表格单元格；
}
.街区{
背景色：红色；
宽度：300px；
显示：表格单元格；
垂直对齐：顶部；
}

文本
尝试此添加
垂直对齐：顶部用于“.block”


.container{
显示：表格；
宽度：100%；
身高：100%；
位置：绝对位置；
}
.地图{
背景颜色：蓝色；
显示：表格单元格；
}
.街区{
背景色：红色；
宽度：300px；
显示：表格单元格；
垂直对齐：顶部；
}

文本
将
垂直对齐：顶部
添加到
.block
。更新了将
垂直对齐：top
添加到
.block
。已更新
将
垂直对齐：顶部
添加到
.block
。更新的小提琴-将
垂直对齐：top
添加到
.block
。更新小提琴-
.container {
    display: table;
    width: 100%;
    height: 100%;
    position:absolute;
}

.map {
    background-color: blue;
    display: table-cell;
}
.block {
    background-color: red;
    width: 300px;
    display: table-cell;
}