I am creating an image element with overlay text. Here is my jsx code

<div className={styles.img}>
    <img src={src} alt="" />
    <p>{`(${size})`}</p>        
</div>

and here is sass

.img {
    min-width: 180px;
    text-align: center;
    cursor: pointer;
    img {
        height: 90px;
        box-shadow: orangered 0 0 5px;
    }
    p {
        color: white;
        font-weight: bold;
        margin: auto;
        font-size: .8rem;
        margin-top: - 1.6rem;
        // max-width: 120px;
        // z-index: 100;
        background-color: #0070f3;
    }
}

I get result as shown in following image. The background of p tag is visible only outside the img and not over the img.

Checkout this issue live here.

How do I show the background for overlay text on image so that it is readable?

I am creating an image element with overlay text. Here is my jsx code

<div className={styles.img}>
    <img src={src} alt="" />
    <p>{`(${size})`}</p>        
</div>

and here is sass

.img {
    min-width: 180px;
    text-align: center;
    cursor: pointer;
    img {
        height: 90px;
        box-shadow: orangered 0 0 5px;
    }
    p {
        color: white;
        font-weight: bold;
        margin: auto;
        font-size: .8rem;
        margin-top: - 1.6rem;
        // max-width: 120px;
        // z-index: 100;
        background-color: #0070f3;
    }
}

I get result as shown in following image. The background of p tag is visible only outside the img and not over the img.

Checkout this issue live here.

How do I show the background for overlay text on image so that it is readable?

• javascript
• css
• node.js
• next.js
• sass

• Thanks for the suggestion. But it did not work. Also, I should not be required to add z-index. I just added to test to see if it makes any difference. – Mayank Kumar Chaudhari Commented Jun 27, 2021 at 7:20

2 Answers 2

You need to set the position to something other than the default value (static) in order to use z-index. Here's an example with position: relative.

p
{
background: #0cf;
margin-top: -1.6rem;
z-index: 100;
}

p.positioned
{
position: relative;
}

<img src="http://via.placeholder./100x80"/>
<p>Test without positioning</p>

<img src="http://via.placeholder./100x80"/>
<p class="positioned">Test with positioning</p>

Thanks to ment by @Devid.

Just to clarify, the position: relative should be added on the p tag. Adding position: relative to the container div does not make any difference.