stacking layers

autopost · Jan 10, 2008

Hello - 
 
I know I can use Z-index to stack abosolutely positioned layers, is it possible to create layers that are relatively placed and stack them on top of one another? 
 
I'm using CSS 
 
Coleshould be possible, have you tried it?It's possible, Cole, but not all browsers render the z-axis the same. You could run into some major headaches with it. 
 
PegOK - I posted yesterday and all I got was, it's possible... obviously it's not that simple or I wouldn't be needing help... so let's try thig again... 
 
I have two layers <div id=x1>...</div> and <div id=x2>some text</div> 
 
Here is my CSS 
#x1 #x2{ 
clear: both; 
text-indent: 6px; 
color: #FFFFFF; 
font-size: 16px; 
font-style: italic; 
font-weight: bold; 
position: relative; 
visibility: hidden; 
z-index: 100; 
} 
 
What i want to acheive is the effect that these layers are absolutely positioned on top of one another - I can't actually do that because of the site is assembleddidn't need to start another thread! 
 
1 min i'll have alook, the phone's ringing

lets see 
 
div.a {position:absolute;top:10px;left:10px;z-index:1;} 
 
div.b {position:absolute;top:10px;left:10px;z-index:2;} 
 
that would 'stack' div 'b' directly above div 'a', is that what you want?Originally posted by colenielsen 
OK - I posted yesterday and all I got was, it's possible... obviously it's not that simple or I wouldn't be needing help... so let's try thig again... 
 
I have two layers <div id=x1>...</div> and <div id=x2>some text</div> 
 
Here is my CSS 
#x1 #x2{ 
clear: both; 
text-indent: 6px; 
color: #FFFFFF; 
font-size: 16px; 
font-style: italic; 
font-weight: bold; 
position: relative; 
visibility: hidden; 
z-index: 100; 
} 
 
What i want to acheive is the effect that these layers are absolutely positioned on top of one another - I can't actually do that because of the site is assembled 
you can't stack them because they are both the same z-index. you are using the same style for both. and yes it is possible and I believe Kevin was assuming you already knew the code since you asked about using z-index.Ok even changing the Z-index doesn't work - I only noted it that way for simplicity sake - they actual Z-indexes are 100 and 101 respectively. 
 
 
div.a {position:absolute;top:10px;left:10px;z-index:1;} 
 
div.b {position:absolute;top:10px;left:10px;z-index:2;} 
 
 
Yes, this is what I want EXCEPT "position:absolute;top:10px;left10pxx;" I can't position the layers absolutely because of the rest of the document and problems with browser exactness of rendering when crossing relative and absolute positioning schemes.ok, just change it to relative then, 
 
position:relative;top:10px;left:10px; 
 
 
no matter what positioning style you use you can still stack different layers

you can't say that. first you ask if it is possible and then you show us the code you use and say it doesn't work.. well then you say that isn't even the code you use. 
 
we can't help you if you are not being honest or anything. 
 
if you use z-index then what difference does it make if you absolute position it or not, it will be sticking above all other elements anyway. and you can't talk about not rendering correctly in all browsers because that is what you get with css, not all of them will do it correctly anyway. 
 
and besides you told it to not show. 
 
you are not making any sense. if you can't position them how do you expect them to be on top of each other. you ahve to use left and top to do what you want.you can do it but since the positioning is relative you have to give relative coordinates: 
 
 
<div style="width:100px;height:100px;z-index:2;border:1px red solid;"> 
words words words 
</div> 
<div style="position:relative;top:-100;left:0;width:100px;height:100px;z-index:3;border:1px blue solid;"> 
this div will stack over the first div 
</div>or you could do it the other way around kevin, have the second div in the normal flow and position the first over it, that way you'd avoid negative values. 
 
But at the end of the day, if he'd followed your advice to try it at the start this thread would have only been two posts long

yeah

and as a side note kevin, that wouldn't work anyway. you can't use negative numbers as mozilla doesn't like themONCE AGAIN - you are all wrong - first of all you're flaming for no reason... I understand that it COULD work - and SHOULD work in most cases... the problem is that I need to insure cross-browser compatability... using relative placements has never worked properly for me before - it still positions things absolutely in most cases.... for example... 
 
<div style="position:relative;top:10px;left:10px"> 
<div style="position:relative;top:10px;left:10px"> 
some stuff 
</div> 
</div> 
 
This should technically place the top,left corner of the second DIV at 20,20 - it still places it at 10,10 at least in the latest build of Mozilla and every one I've used prior. I see the same results in Safari and Opera(sometimes). 
 
Don't give me that it works in Explorer crap... because it's exaclty that... It's all good but I develop on an open-source platform and intend to keep campatability to a maximum.dude, nobody has flamed you. you can't even tell us what you want as we have ALL given perfect examples of what you works and you shoot us down. 
 
for one your code: 
 
<div style="position:relative;top:10px;left:10px"> 
<div style="position:relative;top:10px;left:10px"> 
some stuff 
</div> 
</div> 
 
edit: 
will go to 20,20 of the page but 10,10 of the outer div. 
 
 
by default ALL block level elements are postioned relative (theoretically) but in order for you to load a div on top of another div you have to absolute position it. 
 
<div style="width:100px;height:100px;z-index:2;border:1px red solid; top:0;left:0;"> 
words words words 
</div> 
<div style="position: absolute; top:0;left:0;width:100px;height:100px;z-index:3;border:1px blue solid;"> 
this div will stack over the first div 
</div> 
 
that code works for me in IE, and that is good considering IE doesn't do 90% of css2. 
 
so if this doesn't work for you then I will gracefully bow out of this conversation as it seems you know a lot more html and css than I.So the simple answer to my question is that for this to work I must absolutely position my layers otherwise they will not stack on top of one another. 
 
To acheive the goal that I was wanting I did find an alternative method using javascript - Instead of stacking layers, just change the contents of the DIV

Thanks for the helpOriginally posted by colenielsen 
Don't give me that it works in Explorer crap... because it's exaclty that... It's all good but I develop on an open-source platform and intend to keep campatability to a maximum. 
 
Then you should maybe be using a browser sniffer and a different style sheet depending on the browser. You seem to know that IE and most other browsers calculate the x-y coordinates a bit differently and sometimes very differently, so the only way for true cross-browser compatabilty is a custom style sheet for each browser/browser version. Plus then you have to take into account the platform and the viewing device, ugh!

stacking layers

autopost

Guest