如何将我的表单放在CSS / HTML中的图像之上？

user3604330 发表于 Dev

用户名

开发商好日子！我想问一下如何使表格出现在图像上方？问题是我的表单显示在底部。这是我的屏幕截图。

我的问题的屏幕截图

这是我的代码：

的HTML

<body>

    <div class="container" align="center">
      <div id="image">
        <img src="assets/img/imac.png" style="width:640px; height:678">
      </div>

    <div id="loginForm">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Please sign in</h3>
       </div>
         <div class="panel-body">
           <form accept-charset="UTF-8" role="form">
            <fieldset>
            <div class="form-group">
              <input class="form-control" placeholder="E-mail" name="email" type="text">
            </div>
            <div class="form-group">
             <input class="form-control" placeholder="Password" name="password" type="password" value="">
            </div>
            <div class="checkbox">
              <label>
                <input name="remember" type="checkbox" value="Remember Me"> Remember Me
              </label>
            </div>
          <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
          </fieldset>
          </form>
        </div>
      </div>
    </div>

   </div>

的CSS

body {
background-color: #2ecc71;
}


.container {

width: 1000px;
height: 700px;
margin-top: 100px;
}

#loginForm{
width: 500px;
height: 400px;
}

加布里埃莱·彼得里奥利（Gabriele Petrioli）

制作#imagebeposition:absolute并用它填充.container（制成的position:relative）。

body {
  background-color: #2ecc71;
}
.container {
  width: 1000px;
  height: 700px;
  margin-top: 100px;
  position:relative;
}
#loginForm {
  width: 500px;
  height: 400px;
  position:relative;
  z-index:10;
}

#image{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
}

<div class="container" align="center">
  <div id="image">
    <img src="http://dummyimage.com/600x678/cccccc/ffffff.jpg&text=monitor+image" style="width:640px; height:678">
  </div>

  <div id="loginForm">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Please sign in</h3>
      </div>
      <div class="panel-body">
        <form accept-charset="UTF-8" role="form">
          <fieldset>
            <div class="form-group">
              <input class="form-control" placeholder="E-mail" name="email" type="text">
            </div>
            <div class="form-group">
              <input class="form-control" placeholder="Password" name="password" type="password" value="">
            </div>
            <div class="checkbox">
              <label>
                <input name="remember" type="checkbox" value="Remember Me">Remember Me
              </label>
            </div>
            <input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
          </fieldset>
        </form>
      </div>
    </div>
  </div>

</div>