Question

我正在尝试在我的网页上的图片上叠加两个表单。但结果是表单位于浏览器窗口中的图像下方。帮我我的代码段是

<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" width="100%"><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;
}

Answer 1

有两种选择：
1）设置图像position: absolute;，表格将与该图像重叠 2）将图像设置为background: url()。

无论哪种方式，您都必须指定包装器尺寸。如果容器较小，使用[2]将剪切图像的边缘。使用[1]将显示完整图像。

JSFiddle

Bootstrap：如何在引导程序中重叠图像上的两个表单

1 个答案: