0

我正在尝试在图像上创建一个文本块，并且在第一张图像中它工作正常，但是如果我添加另一个具有相同代码的 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; 
 }

我认为问题与绝对位置有关，但我不确定。

谢谢

4

3 回答 3

1

你把你的定位搞混了。您希望 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; 
 }
于 2013-04-24T12:46:43.323 回答
1

JSFiddle：http: //jsfiddle.net/7zCrQ/

首先，请注意您的结束标签，您缺少正斜杠。

div {
   position:relative;
}
p {
    color:white;
    position:absolute;
    top:10%;
    left:10px;
}

包含元素——在这种情况下是<div>——应该有一个relative. 您要显示的文本（在我的示例<p>中）的位置应为absolute. 绝对定位的元素相对于具有定位的第一个祖先进行定位。这意味着<p>将距离具有相对定位的第一个祖先的顶部 10%，在本例中为<div>. 如果你不给一个祖先定位，它会从<body>.

于 2013-04-24T12:48:32.803 回答
0

只需id为每个使用属性div并给出不同的位置

div#someid{
  position:absolute;
  top: ...;
}

如果你想要它绝对定位；

通过使用position:absolute 元素相对于它的第一个定位来定位。

于 2013-04-24T12:39:51.703 回答