css – 在尊重父框的同时覆盖兄弟框

我认为这是不可能的,但我不是CSS专家,所以我想我会检查.我有一个半透明的div绝对定位在图像上.到目前为止,这是好的,但我想强制我的半透明div尊重它和图像所包含的盒子. <div cla

... . . 我认为这是不可能的,但我不是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展开,请使其浮动.
要强制覆盖与容器位置和大小相关,请使容器相对.

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

要强制覆盖层遵循容器的边界,请使用百分比.

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

我准备了一个例子：http://jsfiddle.net/rYnVL/

. . .. ...