Css 覆盖同级框，同时尊重父框

我认为这是不可能的，但我不是CSS专家，所以我想我应该检查一下。我有一个半透明的div绝对位于图像上方。到目前为止还不错，但我想强制我的半透明div尊重它和图像所在的框

<div class="parent">
  <div class="title-bar"> /* prolly not important */
    <h2>Title</h2>
  </div>
  <img src="whatever"/>
  <div class="overlay">
    A few lines of txt
  </div>
</div>

/*这根本不重要*/
标题
几行文字

---

我想得越多，我就越觉得我可能要求得太多了——我希望父对象用img扩展，但覆盖层受父对象的约束。可以这样做吗？

要强制容器与子容器一起展开

img

，请将其设置为

float

要强制覆盖与容器位置和大小相关，请将容器设置为相对的

.parent {
    float: left;
    position: relative;
}

要根据容器的边界强制覆盖，请使用百分比

.overlay {
    position: absolute;
    max-width: 100%;
    /* And then, position it at will */
    top: 0;
    left: 0;
}

我准备了一个例子：

它是：

材料fadsfasd fsad fasdsdaf
#父项{宽度：自动；高度：自动；边框：1px纯蓝色；背景色：灰色；位置：相对；显示：块；浮动：左；}
#abs{位置：绝对；宽度：100%；高度：100%；背景：#ff0000；不透明度：0.4；}

需要注意的要点：

parent

浮动为不具有100%宽度。位置是相对的。

abs

为绝对值，尺寸为100%

此外，如果

abs

内容大于图像，则会溢出。如果您不喜欢这样，只需添加

overflow:hidden

<div id="parent">
    <div id="abs">stuff fadsfasd fsad fasdsdaf </div>
    <img src="/img/logo.png" />
</div>

#parent {width:auto; height:auto; border:1px solid blue; background-color:grey;position:relative; display:block;float:left;}

#abs {position:absolute;width:100%;height:100%;background:#ff0000;opacity:0.4;}