Question

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

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

由于

Answer 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; 
 }

Answer 2

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>顶部的10％。

Answer 3

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

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

如果你想要绝对定位;

使用position:absolute the element is positioned relative to its first positioned。

图像上的文字

3 个答案: