Javascript 图像高度超过附加元素的容器

我正在检查div

smallCatalogBlock

if

data availability=“No”

，如果它是No，那么

soonOverlay

将被附加到

smallCatalogBlockImg

div中

我遇到的问题是让

soonOverlay

高度仅覆盖图像。此时，它超出了图像容器并填充整个

smallCatalogBlock

div

我该怎么做才能只涵盖

smallCatalogBlockImg

$（'.smallCatalogBlock'）。每个（函数（）{
如果（$（this）.data（'availability'）=='No'）{
$（this）.find（'.smallCatalogBlockImg'）.append（'
即将推出
）；
}
});
.smallCatalogWrap{
宽度：100%；
高度：自动；
边际：60px0；
}
.小型目录块{
宽度：45%；
高度：自动；
显示：内联块；
垂直对齐：顶部；
保证金：20px自动；
文字装饰：无；
}
.小型模块img{
宽度：80%；
高度：自动；
盒影：10px 5px 5px rgba（0,0,0,3）；
显示：块；
保证金：0px自动15px自动；
}
.小标题{
字体系列：“Nunito”，无衬线；
颜色：#4d；
字体大小：1.3rem；
文本对齐：居中；
显示：块；
字体大小：400；
}
.comingSoonSmall{
位置：相对位置；
}
.comingSoonSmall.soonOverlay{
宽度：80%；
身高：100%；
背景:"b82222 ;；
不透明度：.8；
位置：绝对位置；
排名：0；
底部：0；
利润率：0.10%；
}
索诺夫莱内尔先生{
位置：相对位置；
最小高度：350px；
}
.soonOverlayInner.dGw{
字号：600；
文本转换：大写；
字号：2rem；
}

A.
B
您忘记相对定位覆盖的父对象。只有这样，覆盖才能（绝对）相对于其父对象进行定位和调整大小



$（'.smallCatalogBlock'）。每个（函数（）{
如果（$（this）.data（'availability'）=='No'）{
$（this）.find（'.smallCatalogBlockImg'）.append（'
即将推出
）；
}
});
.smallCatalogWrap{
宽度：100%；
高度：自动；
边际：60px0；
}
.小型目录块{
宽度：45%；
高度：自动；
显示：内联块；
垂直对齐：顶部；
保证金：20px自动；
文字装饰：无；
}
.小型模块img{
宽度：80%；
高度：自动；
盒影：10px 5px 5px rgba（0,0,0,3）；
显示：块；
保证金：0px自动15px自动；
}
.小标题{
字体系列：“Nunito”，无衬线；
颜色：#4d；
字体大小：1.3rem；
文本对齐：居中；
显示：块；
字体大小：400；
}
.comingSoonSmall{
位置：相对位置；
}
.comingSoonSmall.soonOverlay{
宽度：80%；
身高：100%；
背景:"b82222 ;；
不透明度：.8；
位置：绝对位置；
排名：0；
底部：0；
利润率：0.10%；
}
索诺夫莱内尔先生{
位置：相对位置；
最小高度：350px；
}
.soonOverlayInner.dGw{
字号：600；
文本转换：大写；
字号：1rem；
文本对齐：居中；
}
.smallCatalogBlockImg{
位置：相对位置；
}

A.
B
您忘记相对定位覆盖的父对象。只有这样，覆盖才能（绝对）相对于其父对象进行定位和调整大小



$（'.smallCatalogBlock'）。每个（函数（）{
如果（$（this）.data（'availability'）=='No'）{
$（this）.find（'.smallCatalogBlockImg'）.append（'
即将推出
）；
}
});
.smallCatalogWrap{
宽度：100%；
高度：自动；
边际：60px0；
}
.小型目录块{
宽度：45%；
高度：自动；
显示：内联块；
垂直对齐：顶部；
保证金：20px自动；
文字装饰：无；
}
.小型模块img{
宽度：80%；
高度：自动；
盒影：10px 5px 5px rgba（0,0,0,3）；
显示：块；
保证金：0px自动15px自动；
}
.小标题{
字体系列：“Nunito”，无衬线；
颜色：#4d；
字体大小：1.3rem；
文本对齐：居中；
显示：块；
字体大小：400；
}
.comingSoonSmall{
位置：相对位置；
}
.comingSoonSmall.soonOverlay{
宽度：80%；
身高：100%；
背景:"b82222 ;；
不透明度：.8；
位置：绝对位置；
排名：0；
底部：0；
利润率：0.10%；
}
索诺夫莱内尔先生{
位置：相对位置；
最小高度：350px；
}
.soonOverlayInner.dGw{
字号：600；
文本转换：大写；
字号：1rem；
文本对齐：居中；
}
.smallCatalogBlockImg{
位置：相对位置；
}

A.
B
哇，我真是个愚蠢的疏忽。谢谢你的帮助！哇，我的疏忽真是愚蠢。谢谢你的帮助！