如何在asp.net中正确的图像上实现白框答案

【问题标题】：How to implement an white box over an image correct in asp.net如何在asp.net中正确的图像上实现白框
【发布时间】：2015-08-14 22:12:37
【问题描述】：

我正在尝试在我的首页上的图像上制作一个带有白色背景的预订框。到目前为止，我已经设法在顶部放置了一个带有以下代码的框：

代码：

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

现在的问题是，当您从 1600 像素到 1200 像素时，白框会移动，无法使其在图像内保持静态。

我所有的图像都设置了以下 css，它们变得响应：

  img {
    max-width: 100%;
  }

我应该改变什么？有什么想法吗？

更新：

框现在非常适合..但现在图像与页面的其余部分不对齐。

左边很好，右边变大了？

【问题讨论】：

我会从使用百分比位置值而不是固定像素边距值开始。

标签： html css

【解决方案1】：

答案here，你应该使用z-index来做到这一点。

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

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

【讨论】：

不想让我的正面图像绝对化..这是唯一的解决方案吗？
是的，z-index 您只能与position: absolute 的position: fixed 一起使用。如您所见，here、position: relative 不起作用
@Mikkel 和你有同样的问题here
它工作得很好..但是现在图像与页面的其余部分不对齐..已经制作了它的外观图像。
@Mikkel 那是不可能的，z-index 只适用于 position: absolute; 或 position: fixed;