Question

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

这样我就可以设置p个对象的top: y和left: x值，使它们相对于div的左上角相应定位，然后依次为图像。

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

我该如何解决这个问题？

Answer 1

看看这个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;
}

和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>

Answer 2

一种方法是使用像:after和:before

这样的伪元素

示例：

img:after {
   content: "Hello, I am the caption";
}

Answer 3

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

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

CSS图像上的字幕

3 个答案: