Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

Problem

I have this style on an tag.

position: absolute;
margin: -477px 0 0 581px;
z-index: 1000;

and near this element I have a div with this style:

position: relative;
margin: 100px 0 0 70px;
z-index: 1054;
bottom: 119px;
width: 67%;

The problem is that the image is always over the div although I change the divs z-index to a higher number.

What can I do that the div will be in top of the image?

Problem courtesy of: Rick Sanchez

Solution

[..]and near this element I have a div with this style

near is ambiguous and makes it sound like your issue is due to a misinterpretation of stacking context

Elements are layered based on a number of factors, crucially they can be generalised as:

  1. Elements that are placed later in the DOM (later in your HTML) appear 'over' those placed before

  2. Elements with a higher z-index appear 'over' those with a lower z-index*

  3. Points 1 & 2 only apply to elements within the same parent-child hierarchy**

*In order for z-indexes to work as anticipated, a position also needs to be assigned, relative to a shared parent element

** May be additionally affected by parent overflow

As such, it sounds like your issue is either that your elements arent children of the same parent element. Or the element you wish to appear 'on top' is placed before the other element in your HTML.

Solution courtesy of: SW4

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×