Javascript 覆盖div，在父级溢出时捕捉

问题：
实际上，我有一行内嵌的容器，其中包含图像，还有一个重叠的div，div/image的底部有文本。当水平调整窗口大小时，图像和div将捕捉到它下面的行并保持内联。但是，覆盖层在完全被窗口的水平调整大小覆盖之前不会与它们一起捕捉，只有这样，它才会捕捉到行下方，并与容器的其余部分一起显示

如果继续水平调整窗口的大小，最终叠加div将捕捉并显示在正确的位置

问题：
如何通过CSS、JS或jQuery使覆盖div在溢出迫使容器进入下一行时跟随它所在的容器

#容器{
位置：相对位置；
显示：内联；
}
#覆盖层{
位置：绝对位置；
显示：内联；
文本对齐：居中；
高度：20px；
背景颜色：灰色；
宽度：304px；
底部：0；
}

试验
试验

试试：

---

您的代码有几个问题：

您正在标记中回收IDID在文档中必须是唯一的。例如，使用

.container

而不是

#container

在覆盖上使用

position:absolute

和

display:inline

没有多大意义，因为它将自动设置为块级别（即

display:block

）

此外，只要在容器元素上切换到

display:inline block

，定位就会起作用。原因有点复杂，但如果您查看，您可以看到，与内联块或块元素相比，内联级元素具有非常不同（可能违反直觉）的特征

.container{
位置：相对位置；
显示：内联块；
}
.覆盖{
位置：绝对位置；
文本对齐：居中；
高度：20px；
背景颜色：灰色；
宽度：304px；
底部：0；
}

试验
试验

这就是你要找的东西吗？顺便说一句，元素的id属性最好是唯一的。为了应用相同的样式规则，将使用类

.container{
位置：相对位置；
显示：内联块；
}
.覆盖{
位置：绝对位置；
显示：内联块；
文本对齐：居中；
高度：20px；
背景颜色：灰色；
宽度：304px；
底部：0；
}

试验
试验

指定容器的宽度，而不是覆盖div节点，并为后一个元素指定100%的宽度。代码如下：

#container {
    position: relative;
    display: inline-block;
    width: 304px;
}

#overlay {
    position: absolute;
    display: inline;
    text-align: center;
    height: 20px;
    background-color: gray;
    width: 100%;
    bottom: 0;
}

这就是它的工作原理：

编辑：

---

我刚刚意识到您在代码中使用了重复的ID。ID必须是唯一的。将容器和覆盖层更改为类

非常感谢，只是匆匆忙忙地把ID的东西忘了。我可以发誓我试过内联块，但显然不是！我需要多睡一会儿。为确保答案的完整性，以防其他人有类似问题，请标记此项。

#container {
    position: relative;
    display: inline-block;
    width: 304px;
}

#overlay {
    position: absolute;
    display: inline;
    text-align: center;
    height: 20px;
    background-color: gray;
    width: 100%;
    bottom: 0;
}