如何在 CSS 中实现绝对定位？

Question

<div id="container" style="float:left;">
        <img src="{{ p.sizes.2.url }}" width="200" height="auto">         
        <div class="trans_caption" style="position:absolute;background-color:#cccccc;">
             Picture Caption
        </div>
</div>

如何将标题覆盖在图片顶部...但与底部对齐？另外，我希望标题宽度与容器相同。我尝试做宽度：100％，但它不起作用......

Answer 1

这是您要找的吗？

只需在主 div 中设置 position:relative - 它将允许相对于主 div 定位内部 div，并在内部 div 中设置 bottom:0 将其定位在底部。带有 float:left 和 width:100% 的小黑客，没有 float width:100% 似乎并不存在才能正常工作。

Answer 2

<div style="position: relative; width: 200px;">
   <img src="" />
   <div style="position: absolute; bottom: 0;">
       <!-- caption text here -->
   </div>
</div>

Answer 3

<style>
    div#container {
        position: relative;
        float: left;
    }

    div#container div {
        position: absolute;
        bottom: 0;
        background: #ccc;
    }
</style>

<div id="container">
    ....

Answer 4

1. 您需要在#container上设置position:relative。这将使绝对定位相对于该容器 div 的边缘。

2. 将 bottom: 0; 添加到 .trans_caption 以使文本的基线（不是确切的底部）与底部对齐图片。如果您想将文本向上移动，请增加该数字。

3. 将 width: 100% 添加到 .trans_caption，使其与容器一样宽。

4. 如果您想让标题居中，请将 text-align: center; 添加到 .trans_caption。

5. 请注意，图像 height 属性的 auto 值无效。

最好将 CSS 与 HTML 标记分开，放在单独的文件中。我们现在拥有的是(尝试一下)：

#container {
    float:left;
    position:relative;
}

.trans_caption {
    background-color:#cccccc;
    bottom:0;
    position:absolute;
    text-align:center;
    width:100%;
}

Answer 5

绝对定位意味着该元素将定位在最后一个父级上未使用默认位置 position: static 定位的特定位置。

相对定位与静态相同，不同之处在于：

• 左、右、上、下将定位从其正常的“静态”位置微移，并且
• 绝对定位的元素将定位在其内部。

所有这一切都意味着，如果您将容器定位为相对位置，则 trans_caption 的绝对定位将相对于您的容器产生影响，而现在它是相对于更高级别的容器定位的。

此外，绝对定位会将您的元素放置在 top: 0;左：0； 除非另有说明。您需要将标题放置在 bottom:0; 处，以将其强制放置在容器的底部。

您的 trans_caption 通常默认为 100% 宽度，因为

是块显示元素，因此它对您提供的示例没有执行任何操作是有道理的。然而，绝对定位的项目并非如此，因此请保留该行。如果您随后使用 text-align: center; 设置样式，使文本在该

中居中，那么它应该看起来像您期望的那样。

Answer 6

我认为你想要做的是在容器上设置 css background 属性。

像这样的东西

<div id="container" style="float:left; width:200px; height:100px; background:url('{{ p.sizes.2.url }}') no-repeat; position:relative">
<span style="position:absolute;bottom:0px">Caption goes here</span>
</div>