如何在页眉和页脚之间设置表单和iframe标签，css？

Question

我不知道为什么会这样！我没有为我的元素设置任何z-index，但是页脚显然位于表单和iframe的顶部。我不明白为什么......

<div class="frontpage1">
  <div class="frontpage1-text">

       .............

       <iframe id="map" src="" width="600" height="460" frameborder="0" style="border:0" allowfullscreen >
            </iframe>

    <footer id="tail">
    <br><br>
      <img src="../work-files/logo.png" style="width: 160px;" >
      <br>
      <p>RH Stuido Photography | Timless Photography</p>
      <p>rick@rhstudiophoto.com | Abbotsford, British Columbia</p>
     <br><br>

screenshot

这就是我的css代码：

.container {
    border-radius:5px;
    position:absolute;
    padding-left:250px;
    width:30%;
}
iframe {
    float:right;    
    position:absolute;
    padding-top:35px;
    right:200px;
}
footer {
    position: relative;
    bottom: 0px;
    width: 100%;
    text-align:center;
    background-color:black;
    color:rgba(255, 255, 255, 0.5);
    font-size:10px;
}