图像上文本的 CSS 定位错误

Question

我有一个包含 position:absolute 的图像，因此我可以在其上放置一个 position:relative 文本。

到目前为止一切正常。唯一的问题是，文本显示在浏览器的上 Angular ，而图像仍在加载。在本地环境中我看不到这一点，但在现场环境中它变得很明显。

静态宽度/高度语句不是一个选项，因为整个页面都是响应式的。如何解决这个问题？当“那天晚些时候”加载 img 时，是否有另一种方法可以“粗略”地告诉文本它应该停留在哪里？

Answer 1

您在问题中描述的内容做错了。绝对元素应该在相对定位的父元素中。这允许绝对定位元素根据父元素定位自己。更好的方法是有一个相对父级，其元素是图像和文本。

演示: https://jsfiddle.net/lotusgodkk/qwLp9f9y/6/

HTML:

<div>
    <img src="http://de.fwsx.co/mbergs/images/home-header.jpg" />
    <span>Sample Text</span>
</div>

CSS:

div {
    position: relative;
    width: 400px;
}

div img {
    max-width: 100%;
}

div span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 20px;
    color: white;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
}

另一种选择是将图像设置为父级的 background-image，然后定位文本。这样您就不必担心文本位置。

这是背景图像的演示: https://jsfiddle.net/lotusgodkk/qwLp9f9y/8/