How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?
I have this style on an
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?
[..]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:
Elements that are placed later in the DOM (later in your HTML) appear 'over' those placed before
Elements with a higher
z-indexappear 'over' those with a lower
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
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.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here