图像不会以绝对位置保留在 div 中（使用 css 网格）答案

【问题标题】：image does not remain within div with absolute position (using css grid)图像不会以绝对位置保留在 div 中（使用 css 网格）
【发布时间】：2018-02-10 10:08:52
【问题描述】：

我试图在<div class="bg-image"></div> 中包含一个图像，并在该 div 中包含一个标题。但不幸的是，标题受到class="bg-image"的不透明度的影响

我将position:absolute; 添加到class="bg-image"，这样我可以将我的标题从div 内移动到外部，并且标题将与图像重叠。但是我的网站从How it should look 变成了How it's not suppose to look

我的猜测是因为我使用的是 CSS Grid，所以设置为 100% 的宽度会在某种程度上搞砸了。我的问题是如何仅使用绝对定位将图像包含在 <div class="bg-image"></div> 中？

jsfiddle

【问题讨论】：

标签： html css sass css-position css-grid

【解决方案1】：

如果我理解正确，只需将position: relative 添加到.main-box

https://jsfiddle.net/sp2mjbur/

【讨论】：