1

<img>我正在尝试使用一个对象和两个用 CSS 设置样式的对象来制作带有 CSS 的“meme”外观的字幕图像<p>。现在我有一个<div>包含 the<img>然后是两个<p>的。我想要做的是将图片定位在 div 的左上角，然后将其设置z-index为 -1，然后以某种方式将两个 p 对象定位在图像上，但相对于 div 的左上角定位.

这样我就可以设置 p 对象的top: y和left: x值，以便它们相对于 div 的左上角和图像相应地定位。

但是当我尝试position: relative为 p 对象设置时，会出现一个问题，即第一个 p 放置正确，但第二个 p 相对于第一个 p 定位，因此即使它位于top: 0, left: 0它仍然低于应有的位置。

我怎样才能解决这个问题？

4

3 回答 3

4

看看这个jsfiddle：

http://jsfiddle.net/56J8y/1/

相关的 CSS

.meme_container {
 position: relative;   
}
.meme_container .top_meme {
    position:absolute;
    top:0;
    left:0;
}
.meme_container .bottom_meme {
    position:absolute;
    bottom:0;
    left:0;
}

​</p>

和html

<div class="meme_container">
<img src="https://www.google.com/images/srpr/logo3w.png"/>
<p class="top_meme">This is a caption 1</p>
<p class="bottom_meme">This is a caption 2</p>
</div>​
于 2012-04-25T23:44:24.967 回答
1

一种方法是使用伪元素，如:after和:before

例子：

img:after {
   content: "Hello, I am the caption";
}
于 2012-04-25T23:33:00.953 回答
0

我认为您在谈论这种情况：

<div>
  <img />
  <p class="first">caption1</p>
  <p class="second">caption2</p>
</div>

然后做你想做的事情，你需要将 div 的位置设置为某些东西（相对通常不会影响你的行为，所以它是一个不错的选择）。一旦完成定位绝对可以在里面使用。绝对是指下一个更高位置的元素！！

div{position:relative};
p{position:absolute};
p.first{top:10px};
p.second{top:20px};
于 2012-04-25T23:45:08.437 回答