CODEWITHSUNDEEP
htmlcss
Anuj
Anuj

Reputation: 1526

z-index not working with image and p tag

i have an image and a paragraph on a html page.

the code is as follows:-

<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
left:0px;
top:0px;
background-color:red;
z-index:1;
}

p
{
z-index:2;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>This is a sample paragraph for z-index testing</p>
</body>
</html>

here when is put z-index for image lesser than p tag then also it appears above p tag.

can anyone tell me why z-index in not working in my case??? thanks in advance

Upvotes: 4

Views: 7715

Answers (5)

Shreyan Das
Shreyan Das

Reputation: 113

An element with greater stack order is always in front of an element with a lower stack order.

In your code, the p tag has a stack order of 2, whereas your img tag has a stack order of 1. Your p tag thus has a greater stack order, meaning the text will be shown in front of the image.

If you want the opposite result, try using negative values for both the image and the paragraph.

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
p {
  position: absolute;
  left: 15px;
  top: 45px;
  z-index: -2;
}

See if the above snippet helps you.

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11496

assign position: relative to <p> for z-index to work.

For OP's Clarification :

from : Any weird rules about z-index I should know about?

In addition, a child can never be below its parent. This example, also on Jsfiddle illustrates it.

Based on the example you added it's clear the trouble you're having:

z-index is only relative to its parent, which in most cases is the document itself. If the z-index of one sibling is lower than another, nothing you change about first sibling's children can move it above its parents sibling. Read more about stacking context if you're interested.

Here is a visual:

z-index example

Crossed out in red is what you want to do, and it is not possible with CSS (considering those small boxes are children of the bigger box, with markup which might look like this:

<div class="one">
</div>
<div class="two">
     <div> I can never be above "one", if my parent "two" isn't. </div>
</div>

A solution would be to move the "overlay" inside the wall, or better yet use a pseudo element (which is rendered as a child of the element it is applied to), because the overlay sounds like it something presentational, and thus should remain in the domain of CSS if an overlay div would add no semantic meaning.

Upvotes: 11

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

z-index will work only if position property is specified,

so specify position: relative for the p tag

p
{
position: relative;
z-index:2;
}

DEMO

Upvotes: 4

karthickj25
karthickj25

Reputation: 1197

change z-index to -1 for your image

img { position:absolute; left:0px; top:0px; background-color:red; z-index: -1; }

Upvotes: 0

n1kkou
n1kkou

Reputation: 3142

Your p tag needs a position value too, so the z-index can affect him.

But in this case you can asign float:left to the image, and place it inside the p tag so the paragraph text will wrap next to the image.

Upvotes: 2

Related Questions