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

Question

我知道有几个类似的问题，但我无法找到适合我情况的解决方案

.parent-div{
  margin-top: 50px;
  max-width: 350px;
  background-color: azure;
  position: relative;
  height: 400px;
}
img{
  max-height: 100px;
}
.image-holder-div{
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: white;
  padding: 15px;
}

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

就是这种情况。 我需要将图像放在正确的位置。 （有一定的定位） 我需要将文本放在图像持有者div上。但主要问题是在不使用position:absolute文本的情况下这样做 我开始z-index，但没有结果。

Answer 1

提供 p标记 position:relative，这样可以解决您的问题：）

  

以下是工作片段：

＆＃13;

＆＃13;

.parent-div {
  margin-top: 50px;
  max-width: 350px;
  background-color: azure;
  position: relative;
  height: 400px;
}

img {
  max-height: 100px;
}

.image-holder-div {
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: white;
  padding: 15px;
}

p {
  position: relative;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将p元素设为position: relative。比设置z-index: 1;这会将文本放在图像前面。

＆＃13;

＆＃13;

.parent-div{
  margin-top: 50px;
  max-width: 350px;
  background-color: azure;
  position: relative;
  height: 400px;
}
.parent-div p {
  position: relative;
  z-index: 1;
}
img{
  max-height: 100px;
}
.image-holder-div{
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: white;
  padding: 15px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

请试试这个：

＆＃13;

＆＃13;

.parent-div{
  margin-top: 50px;
  max-width: 350px;
  background-color: azure;
  position: relative;
  height: 400px;
}
img{
  max-height: 100px;
}
.image-holder-div{
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: white;
  padding: 15px;
}
.over {
position: relative;
z-index: 4; /* if needed */
}

＆＃13;

<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 class="over">some text here which I need to be ober the image</p>
		<p class="over">The same situation is here, need to be... </p>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果您想这样做，可以将其用作div的背景图片，如下所示。

＆＃13;

＆＃13;

.parent-div{
  margin-top: 50px;
  max-width: 350px;
  background-color: azure;
  position: relative;
  height: 400px;
  background-image: url("http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142");
  background-repeat: no-repeat;
  background-size: auto 100px;
  background-position: right top;
}

＆＃13;

<div class="parent-div">
		<p>some text here which I need to be over the image</p>
		<p>The same situation is here, need to be... </p>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

.parent-div{
  margin-top: 50px;
  max-width: 350px;
  background-color: azure;
  position: relative;
  height: 400px;
}
img{
  max-height: 100px;
}
.image-holder-div{
  position: absolute;
  right: -15px;
  top: -15px;
  background-color: white;
  padding: 15px;
}
.parent-div p{ 
position:relative
}

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

Answer 6

 p{
      position: relative;
    }
    .parent-div{
      margin-top: 50px;
      max-width: 350px;
      background-color: azure;
      position: relative;
      height: 400px;
    }
    img{
      max-height: 100px;
    }
    .image-holder-div{
      position: absolute;
      right: -15px;
      top: -15px;
      background-color: white;
      padding: 15px;
    }

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

最佳解决方案是将position: relative提供给p元素

Answer 7

Link to jsfiddle

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