如何在asp.net中的图像上实现白框

Question

我试图在我头版的图像上创建一个白色背景的预订框。到目前为止，我已设法使用以下代码放置一个框：

代码：

 <div class="row">
<div class="col-sm-12 contentpage">        
    <div class="frontimage">
        <img src="~/images/index.jpg" />

        <div class="col-sm-4">
            <div class="bookingbox">

            </div>
        </div>
    </div>                      
</div>
</div>

的CSS：

 .bookingbox {
    background-color: white;
    position: absolute;
    height: 100px;
    margin-top: -580px;
    margin-left: 10px;

 }

 @media (min-width: 1200px) {
    .bookingbox {
        display: none;
    }
 }

现在的问题是，当你从那里开始，让白色的盒子移动1600px到1200px时，不能让它在图像中保持静止。

我的所有图片都设置了以下css，它们变得敏感：

  img {
    max-width: 100%;
  }     

我应该改变什么？任何想法？

更新

盒子现在完美贴合..但现在图像与页面的其余部分没有对齐。

左侧是好的，但右侧变得更大？

Answer 1

答案为here，您应该使用z-index来执行此操作。

＆＃13;

＆＃13;

.bookingbox {
    background-color: red;
    position: absolute;
    height: 100px;
    width: 100px;
    z-index: 2;
    position: absolute;
    top: 0;
 }

.frontimage {
    z-index: 1;
    position: absolute;
}

 @media (min-width: 1200px) {
    .bookingbox {
        display: none;
    }
 }

＆＃13;

<div class="row">
<div class="col-sm-12 contentpage">        
    <div class="frontimage">
        <img src="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image0.jpg" />

        <div class="col-sm-4">
            <div class="bookingbox">

            </div>
        </div>
    </div>                      
</div>
</div>

＆＃13;

＆＃13;

＆＃13;