停止div重叠容器
停止div重叠容器
提问于 2018-09-10 05:54:16
好的，所以我目前正在构建一个定制的WordPress主题，我只是有一个时刻，我的大脑是完全空白的……就像我知道，但我就是搞不明白！
基本上我有一个聚光灯部分，其中有一个图像，然后在该图像的底部显示标题和简短的描述等容器…查看屏幕截图：http://prntscr.com/ksh0tf
基本上我已经做了img与样式它(设置高度/宽度，对象适合等)，然后我已经做了容器div保存内容，作为一个位置:绝对，并放置一个底部:0-(在这种情况下，底部: 4px，因为它是一个微小的错位)，因为我希望它在图像的底部，无论盒子的高度等。在黑色容器上，我有一个宽度: 100%设置，正如你所看到的，它导致它重叠到其他div上。这也是基于bootstrap构建的，所以它是一个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，当宽度: 100%设置为100%时，横跨图像的长度，因为这些都可能是不同的大小，所以我不想给出设置的宽度等。
提前感谢您的帮助！
回答 1
Stack Overflow用户
发布于 2018-09-10 08:34:06
由于.spotlight-box是绝对定位的，如果您想让它正确地位于父对象内部，那么它的父对象需要相对定位：
.spotlight-container {
position: relative;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52248939
复制相关文章
相似问题
腾讯云开发者
