html - CSS 定位

Question

我必须创建一个看起来像这样的 div

<div id=1>
<img></img>
<div id=2></div>
</div>

id为2的div应该出现在图片的右下角，图片的大小不固定id=2的div应该应用什么css

id =1 的 div 没有定义位置，所以使用默认值，图像也是如此，我无法更改这些只有 id=2 的 div 对我来说是可编辑的。请提出一些建议

Answer 1

如果您需要将第二个 DIV 定位在第一个 DIV 之上，那么最好的解决方案是将第一个 DIV 定位为 position:relative;然后在第二个 DIV 上使用绝对定位。第一个 DIV 必须具有固定宽度或 float 以将其宽度限制为图像的宽度。

如果您无法控制第一个 div，您就会陷入困境。您仍然需要通过显式设置宽度或使用 float 来确保第一个 div 具有与图像相同的宽度。然后，您可以将第二个 DIV 定位为负边距，并结合使用 position:relative 和 z-index 使其在图像顶部流动。但这意味着您必须知道第二个 DIV 的高度才能使用负边距弥补该确切数量。它会起作用，但解决方案不会像第一个那样强大。

如果您只需要在图像下方显示文本，则更容易一些，只需使用普通的旧 float 即可。我在这里编写了所有三个场景的非常基本的版本:http://jsfiddle.net/laustdeleuran/7CnSh/

希望有用。