图像上的文本
图像上的文本
提问于 2013-04-24 20:37:10
我试图在一张图片上创建一个文本块，在第一张图片中它工作得很好，但是如果我用相同的代码添加另一个div，第二张图片的文本块就定位在第一张图片中。
下面是我的例子：
<section>
<div>
<img src="">
<p><span>Text Example 1</span><p>
</div>
<div>
<img src="">
<p><span>Text Example 2</span><p>
</div>现在是CSS：
img {
position: relative;
width: 100%;
}
p {
position: absolute;
top: 10%;
width: 100%;
}
p span {
color: white;
font: 1.75em Helvetica, Sans-Serif;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 0.625em;
}我认为这个问题与绝对位置有关，但我不确定。
谢谢
Stack Overflow用户
回答已采纳
发布于 2013-04-24 20:48:33
JSFiddle：http://jsfiddle.net/7zCrQ/
首先，注意你的结束标签，你遗漏了正斜杠。
div {
position:relative;
}
p {
color:white;
position:absolute;
top:10%;
left:10px;
}包含元素--在本例中是<div> --应该有一个relative类。您想要显示的文本--在我的示例中是<p> --的位置应该是absolute。绝对定位的元素相对于具有定位的第一个祖先进行定位。这意味着<p>将从具有相对定位的第一个祖先(在本例中为<div> )的顶部起10%。如果你不给出祖先的位置，它将是离<body>顶部10%。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16192232
复制相关文章
相似问题
腾讯云开发者
