Question

我认为这是不可能的，但我不是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扩展，但是叠加受父母约束。可以这样做吗？

Answer 1

要强制容器随孩子img展开，请将其设为float 要强制叠加层与容器位置和大小相关，请创建容器relative。

.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/

Answer 2

这是doable, but not quite beautiful：

<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;}

要点注意：
parent浮动到没有100％的宽度。职位是相对的 abs是绝对的，100％的大小。

另外，如果abs内容大于图片，则会溢出。如果您不喜欢这样，请添加overflow:hidden。

在尊重父盒的同时覆盖兄弟盒子

2 个答案: