CODEWITHSUNDEEP
htmlcsscss-position
Aghasi Grigoryan
Aghasi Grigoryan

Reputation: 77

Position a text over image containing div

I know there are several similar questions, but I couldn't find solution for my situation 

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

This is the situation. I need the image to be in right place where it is now. (with certain positioning) And I need to put text over the image holder div. But the main question is to do that without using position:absolute for text.
I uzed z-index but no result.

Upvotes: 1

Views: 156

Answers (7)

J. Shabu
J. Shabu

Reputation: 1053

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>

Upvotes: 0

Aghasi Grigoryan
Aghasi Grigoryan

Reputation: 77

 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>

The best solution was to give position: relative to p elements

Upvotes: 0

Red
Red

Reputation: 7299

Give the p elements a position: relative. Than set z-index: 1; This will put the text in front of the image.

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

Upvotes: 1

RAJNIK PATEL
RAJNIK PATEL

Reputation: 1049

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

Upvotes: 0

Sahil Dhir
Sahil Dhir

Reputation: 4250

Give your p tags position:relative and this will solve your problem :)

Below is working snippet:

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

Upvotes: 1

olahell
olahell

Reputation: 2091

If you want to do that you can just use it as a background image to the div see below.

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

Upvotes: 0

itacode
itacode

Reputation: 3787

Please try this:

.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 */
}
<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>

Upvotes: 0

Related Questions