Menu
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
810
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:
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.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
