图像上的文本
图像上的文本
提问于 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;
}我认为这个问题与绝对位置有关，但我不确定。
谢谢
回答 3
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用户
发布于 2013-04-24 20:46:43
你搞混了你的定位。您希望div相对定位，而段落绝对定位。
http://tinker.io/701a5
img {
width: 100%;
}
div {
position: relative;
}
div p {
top: 10%;
width: 100%;
position: absolute;
}
div 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:39:52
只需为每个div使用id属性，并给出不同的位置
div#someid{
position:absolute;
top: ...;
}如果你想要它的绝对位置；
通过使用position:absolute the element is positioned relative to its first positioned。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16192232
复制相关文章
相似问题
腾讯云开发者
