我试图在我头版的图像上创建一个白色背景的预订框。到目前为止,我已设法使用以下代码放置一个框:
代码:
<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%;
}
我应该改变什么?任何想法?
更新
盒子现在完美贴合..但现在图像与页面的其余部分没有对齐。
左侧是好的,但右侧变得更大?
答案 0 :(得分:0)
答案为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;
}
}
&#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;