停止 div 与容器重叠

Question

好的，所以我目前正在构建一个定制的 WordPress 主题，而我只是有一个我的脑袋完全空白的时刻......就像我知道它，但我就是想不通！

基本上我有一个聚光灯部分，它有一个图像，然后在该图像底部有一个容器，显示标题和简短描述等...参见截图：http://prntscr.com/ksh0tf

基本上我已经完成了 img 的样式（设置高度/宽度、对象适合等），然后我完成了包含内容的容器 div，作为位置：绝对并放置底部：0 - （在这种情况下，底部：4px，因为它有点不合适）因为我希望它每次都位于图像的底部，无论盒子的高度等。在黑色容器上我有一个宽度： 100% 设置，如您所见，它导致它与另一个 div 重叠。这也是基于引导程序构建的，因此它是 col-sm-8 和 col-sm-4，但似乎文本容器 div 不希望只适合图像的长度等。

这是我的 HTML 代码：

    <?php if ($atts['spotlightcolour'] == 'black' ) : ?>
    <div class="spotlight-container">
        <img class="spotlight" src="<?php echo $atts['bgimage']['data']['icon']; ?>" />
        <div class="spotlight-box" style="background-color: rgba(0, 0, 0, 0.3);">
            <?php echo $atts['title']; ?>
            <br />
            <?php echo $atts['description']; ?>
        </div>
    </div>
<?php endif; ?>

CSS：

    img.spotlight{
    height: 256px;
    width: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.spotlight-box{
    position: absolute;
    width: 100%;
    bottom: 4px;
    z-index: 3;
    display: block;
    color: #fff;
    padding: 20px;
}

我只希望包含内容的容器 div 在设置 width: 100% 时横跨图像的长度，因为这些都可能是不同的大小，所以我不想给出设置的宽度等。

提前感谢您的帮助！

Answer 1

由于.spotlight-box 是绝对定位的，如果你想让它正确地坐在父级内部，它的父级需要相对定位：

.spotlight-container {
  position: relative;
}

小提琴：http://jsfiddle.net/ctdu9bzk/4/