使绝对定位的嵌套子容器的宽度

Question

我实际上是在页面上显示横幅图片。在该图像的底部是一个叠加层（绝对位置 div）和半透明背景图像以产生 "see through" 效果。除了宽度为 100% 的覆盖层扩展到我的容器 div 之外，一切都正确定位并且工作正常。我试过将容器 div 的溢出设置为隐藏，但这似乎不起作用。我的父容器也有相对位置。这是响应式的，因此叠加层需要缩小和扩展到图像宽度。这是我的代码：

.hero-img-wrap {
  position: relative;
  margin-top: 35px;
  padding-left: 15px;
  padding-right: 15px;
}

.hero-img-wrap img {
  width: 100%;
  height: auto;
}

.hero-img-wrap .trans-overlay {
  position: absolute;
  bottom: 0;
  z-index: 9;
  height: 19px;
  background-image: url('../images/semi_transparent_white.png');
  width: 100%;
}

<div class="hero-img-wrap">
  <img src="images/banner_image.jpg" alt="">
  <div class="trans-overlay"></div>
</div>

我可以用 JQuery 来解决这个问题，但我想避免这种情况。对于它的价值 - 此代码在 Bootstrap 3 列中。

Answer 1

尝试

宽度：继承；
在叠加层上 div

Answer 2

既然定义了高度，为什么不用负值呢

position: relative;
top: -19px;

只是一个想法，这里有一个 fiddle 给你

http://jsfiddle.net/g11yggap/

使绝对定位的嵌套子容器的宽度

Make absolute positioned nested child the width of container

css

css-position