[RESOLVED] z_index not working

This site is best viewed in a modern browser with JavaScript enabled.

Ddurand

Hi.

I have a little problem (again) :

I have a lot of elements on the page (isometric map), nearly each with it's own z-index.
It's okay, they all respect their z-index priority (high z-index hide low z-index).

BUT theses two, a simple image (a black box) and a div with a text.

The image is always on top of the text, whatever z-index I put in the two.

The funny thing is theses two respect the z-index of all the others elements in the page. But whatever i do, "a1" is alway on top of "a2".

Meaning i can have this horrible thing : A1 on top of A2, on top of A3, on top of A1.

A1>A2>A3>A1 !

Who need to divise by 0 !

        <div id="ratsodie">


<img id="a1" width="90%" height="90%" src="ratsodie/interface/fond_ville.svg" style="position: absolute; z-index: 365; opacity: 08;">

<div id="a2" style="position:absolute; top: 10px; left: 10px; z-index: 375; opacity: 1; border: 3px solid rgb(0, 0, 0);"> ville 1 .</div>


    </div>

Idea, somebody ?

rtrethewey

I don't know why these elements aren't rendering properly for you with respect to their z-index, but I would suggest that you make sure that you have set a position (top/bottom,left/right) on a1, and correct the syntax error in the opacity setting (probably should be "0.8") in the inline style on that element. Either one might help (although, I doubt it).

Eye_for_Video

Keep in mind that you can't just give an element a z-index of and by itself.
z-indexing only works with elements that have a declared position.... and using a declared position can appear to be somewhat tricky. Hope this helps clear that up:

Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:

The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.

z-indexing ONLY works with elements that have a declared position.

Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.

The least understood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.

So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:

If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

So be sure to give a declared position to both the parent and the child <div>.

Neglecting to follow this rule is the main reason why the use of declared positioning fails.

And just one more point, almost never is it necessary to use a declared position, and that method certainly should not be used for general page layout.

But if and when a special situation comes up that you really do need z-indexing... then of course you will also have to use a declared position. Understanding the "Parent Rule" will make working with z-indexing and declared positions much easier and more successful.

Best wishes,
Eye for Video
www.cidigitalmedia.com

Ddurand

Ooh ! that works ! I was stupid.

Tank you to you two :-)