Bootstrap：如何在 bootstrap 中重叠图像上的两种形式
Posted
技术标签:
【中文标题】Bootstrap：如何在 bootstrap 中重叠图像上的两种形式【英文标题】：Bootstrap:How to overlap two forms on an image in bootstrap 【发布时间】：2014-10-15 01:45:33 【问题描述】：我正在尝试在我网页上的图像上叠加两个表单。但结果是表单位于浏览器窗口中的图像下方。帮我 我的代码段是
<head>
<title>MyHealth template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap-3.2.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="styles.css" rel="stylesheet">
</head>
<div class="row pos-rel">
<img src="images/land.jpg" class="img-responsive" id="image">
<!--form1-->
<div class="col-xs-4 form-cl1">
<form class="form form-cl2" role="form">
<div class="form-group col-xs-10 form-gp">
<label for="check"><h3>Health CheckUp for</h3></label><br>
<select id="check" class="form-control input-lg"></select><br>
<label for="location"><h4>My Location</h4></label>
<select id="location" class="form-control input-lg"></select> <br>
<select id="location" class="form-control input-lg" style="width:45%;display:inline;"></select>
<select id="location" class="form-control input-lg" style="width:45%;display:inline;float:right;"></select>
<label><h4>Preffered cost range</h4></label><br>
<img src="images/cost range.png" ><br><br>
<div class="row">
<div class="col-xs-1">
<label for="from">From</label>
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text" id="from">
</div>
<div class="col-xs-1">
<label for="from">To</label>
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text">
</div>
</div>
<br><br>
<button type="button" class="btn btn-default btn-block" style=""><h4><b>Suggest me Health Check Packages</b></h4></button><br>
</div>
</form>
</div>
</div>
css 是
.pos-rel
position:relative;
#image
z-index:0;
width:100%;
height:858px;
margin-top:-30px;
.sec-col1
z-index:3;
font-family:'futura std medium';
margin-left:30px;
margin-top:90px;
.list1
float:left;
margin-left:30px;
z-index:2;
color:black;
.form-cl1
float:right;
margin-top:110px;
margin-right:20px;
z-index:7;
font-family:'futura std light';
color:#fff;
display:inline;
.form-cl2
position:absolute;
z-index:7;
background:url(images/rectangle1.png);
background-size:cover;
width:100%;
.form-gp
margin-left:30px;
margin-right:30px;
margin-top:20px;
【问题讨论】：
请贴一些代码。没有它就无法提供帮助 放图片position: absolute; z-index: 5，表格：position: relative; z-index: 6
@Justin 将您的两个表单放在 div 中，并将图像用作该 div 的 background-image。
@MaryMelody 但使用用户提供的 html 结构，这是唯一可能的解决方案：D
@Justin 请通过编辑您的问题来格式化您的代码。
【参考方案1】：
有两种选择：
1) 设置图像position: absolute;，表单将与该图像重叠。
2) 设置图片为background: url()。
无论哪种方式，您都必须指定包装器尺寸。如果容器较小，使用 [2] 将切割图像的边缘。使用 [1] 将显示完整图像。
JSFiddle
【讨论】：
以上是关于Bootstrap：如何在 bootstrap 中重叠图像上的两种形式的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Bootstrap Table 中添加 Bootstrap 按钮