Html 表中的行对齐不正确

我有一个HTML表格，第一行有一个背景图像和一些内容。表格的第二行应从第一行的下方开始，但它显示在第一行的顶部

尝试过显示、断开和其他新行属性

.bg图像{
位置：固定；
左：0；
右：0；
z指数：1；
背景图片：url（./Images/Home.jpg）；
背景重复：无重复；
宽度：100%；
身高：100%；
浮动：左；
-webkit过滤器：模糊（2px）；
-moz滤波器：模糊（2px）；
-o-滤波器：模糊（2px）；
-ms滤波器：模糊（2px）；
过滤器：模糊（2px）；
}
*在页面/图像中间位置的文本*/
.bg文本{
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.9）；
/*黑色w/不透明度/透明*/
颜色：白色；
字体大小：粗体；
边框：3px实心#f1f1；
位置：绝对位置；
最高：60%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：2；
宽度：95%；
身高：40%；
填充：20px；
文本对齐：居中；
}
欢迎来到CoachX
这是不可见的

我建议使用Bootstrap（） 就你而言：

<div class="container">

   <div class="row">
      <div class="col-sm">

    <form>
            <h1>This is not visible</h1>
    </form>


      </div>
   </div>

   <div class="row">
      <div class="col-sm">
          Table down
      </div>
   </div>

</div>

这是不可见的
放下桌子

我看不到任何行：为什么要将table和div标记组合在一起，您可以使用css'-webkit order'和'order'纯粹使用div标记来实现这一点。z-index不用于排序标签，z-index用于分层，而且您的位置固定和位置绝对组合也需要重新访问。欢迎使用堆栈溢出，请建议不要使用表标签，这将非常好