如何将我的表单放在 css/html 中的图像之上? [英] How to put my form on top of an image in css/html?

查看：22
本文介绍了如何将我的表单放在 css/html 中的图像之上?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

开发者好！我想问一下如何让我的表单出现在我的图像之上?问题是我的表单出现在底部.这是我的屏幕截图的图像.

这是我的代码:

HTML

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

<div id="登录表单"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">请登录</h3>

<div class="panel-body"><form accept-charset="UTF-8" role="form"><字段集><div class="form-group"><input class="form-control" placeholder="E-mail" name="email" type="text">

<div class="form-group"><input class="form-control" placeholder="Password" name="password" type="password" value="">

<div class="checkbox"><标签><input name="remember" type="checkbox" value="记住我">记住账号

<input class="btn btn-lg btn-success btn-block" type="submit" value="登录"></fieldset></表单>

CSS

body {背景颜色:#2ecc71；}.容器 {宽度:1000px；高度:700px；边距顶部:100px；}#登录表格{宽度:500px；高度:400px；}

解决方案

使 #image 为 position:absolute 并填充 .container> (由 position:relative 组成).

body {背景颜色:#2ecc71；}.容器 {宽度:1000px；高度:700px；边距顶部:100px；位置:相对；}#登录表格 {宽度:500px；高度:400px；位置:相对；z-索引:10；}#图片{顶部:0;左:0;右:0;底部:0;位置:绝对；}

<div id="图像"><img src="http://dummyimage.com/600x678/cccccc/ffffff.jpg&text=monitor+image" style="width:640px; height:678">
<div id="登录表单"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">请登录</h3>

<div class="panel-body"><form accept-charset="UTF-8" role="form"><字段集><div class="form-group"><input class="form-control" placeholder="E-mail" name="email" type="text">

<div class="form-group"><input class="form-control" placeholder="Password" name="password" type="password" value="">

<div class="checkbox"><标签><input name="remember" type="checkbox" value="记住我">记住我

<input class="btn btn-lg btn-success btn-block" type="submit" value="登录"></fieldset></表单>

Good day developers! I would like to ask if how can I make my form appear on top of my image? The problem is that my form appear at the bottom. Here's the image of my screenshot.

Here are my codes:

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;
}

解决方案

Make the #image be position:absolute and fill the .container (which is made position:relative) with it.

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>

这篇关于如何将我的表单放在 css/html 中的图像之上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆