Html 将文本放置在包含div的图像上

我知道有几个类似的问题，但我找不到解决我的情况的办法

.parent div{
边缘顶部：50px；
最大宽度：350px；
背景颜色：天蓝；
位置：相对位置；
高度：400px；
}
img{
最大高度：100px；
}
.影带组{
位置：绝对位置；
右图：-15px；
顶部：-15px；
背景色：白色；
填充：15px；
}

这里有一些文字，我需要在图片后面

同样的情况在这里，需要

请尝试以下操作：

.parent div{
边缘顶部：50px；
最大宽度：350px；
背景颜色：天蓝；
位置：相对位置；
高度：400px；
}
img{
最大高度：100px；
}
.影带组{
位置：绝对位置；
右图：-15px；
顶部：-15px；
背景色：白色；
填充：15px；
}
.结束{
位置：相对位置；
z索引：4；/*如果需要*/
}

这里有一些文本，我需要在图像后面显示
同样的情况也在这里，需要

如果您想这样做，您可以将其用作

div的背景图像，请参见下文


.parent div{
边缘顶部：50px；
最大宽度：350px；
背景颜色：天蓝；
位置：相对位置；
高度：400px；
背景图像：url（“http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142");
背景重复：无重复；
背景尺寸：自动100px；
背景位置：右上角；
}

这里有一些文字，我需要在图片上

同样的情况在这里，需要

给出你的p标签
位置：相对
，这将解决你的问题：）

以下是工作片段：


.parent div{
边缘顶部：50px；
最大宽度：350px；
背景颜色：天蓝；
位置：相对位置；
高度：400px；
}
img{
最大高度：100px；
}
.影带组{
位置：绝对位置；
右图：-15px；
顶部：-15px；
背景色：白色；
填充：15px；
}
p{
位置：相对位置；
}

这里有一些文字，我需要在图片后面

同样的情况在这里，需要


.parent div{
边缘顶部：50px；
最大宽度：350px；
背景颜色：天蓝；
位置：相对位置；
高度：400px；
}
img{
最大高度：100px；
}
.影带组{
位置：绝对位置；
右图：-15px；
顶部：-15px；
背景色：白色；
填充：15px；
}
.parent div p{
职位：相对
}

这里有一些文字，我需要在图片后面

同样的情况在这里，需要

给
p
元素一个
位置：相对的
。比设置
z-索引：1这将把文本放在图像前面


.parent div{
边缘顶部：50px；
最大宽度：350px；
背景颜色：天蓝；
位置：相对位置；
高度：400px；
}
.家长组p{
位置：相对位置；
z指数：1；
}
img{
最大高度：100px；
}
.影带组{
位置：绝对位置；
右图：-15px；
顶部：-15px；
背景色：白色；
填充：15px；
}

这里有一些文字，我需要在图片后面

同样的情况在这里，需要


p{
位置：相对位置；
}
.家长组{
边缘顶部：50px；
最大宽度：350px；
背景颜色：天蓝；
位置：相对位置；
高度：400px；
}
img{
最大高度：100px；
}
.影带组{
位置：绝对位置；
右图：-15px；
顶部：-15px；
背景色：白色；
填充：15px；
}

这里有一些文字，我需要在图片后面

同样的情况在这里，需要


.parent div{
边缘顶部：50px；
最大宽度：350px；
背景颜色：天蓝；
位置：相对位置；
高度：400px；
z指数：-1；
}
img{
最大高度：100px；
z指数：-1；
}
.影带组{
位置：绝对位置；
右图：-15px；
顶部：-15px；
背景色：白色；
填充：15px；
z指数：-1；
}
.parent div p{z-index:9999；}
这里有一些文字，我需要在图片后面

同样的情况在这里，需要

使用图像作为背景怎么样？我使用了，这是克服这个问题的一个技巧，但我正在寻找更好的解决方案使用位置：p标记上的相对你可以使用css属性float：right@SahilDhir太好了，谢谢，它解决了我的问题！
.parent-div{
  margin-top: 50px;
  max-width: 350px;
  background-color: azure;
  position: relative;
  height: 400px;
    z-index:-1;
}
img{
  max-height: 100px;
  z-index:-1;
}
.image-holder-div{
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: white;
  padding: 15px;
    z-index:-1;
}
.parent-div p{z-index:9999;}

<div class="parent-div">
        <div class="image-holder-div">
            <img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
        </div>
        <p>some text here which I need to be ober the image</p>
        <p>The same situation is here, need to be... </p>
    </div>