Overlapping divs

Joined: 07/24/2007
User offline. Last seen 44 weeks 3 days ago.

I am trying to overlap to divs... Tried working z-index, but I can't get it to work...

Sample Image

Sample of page w/o images - - Sample page

Follow me on twitter : http://twitter.com/svjenkinsjr

G&G Podcast Host
Rob Feature's picture
Joined: 06/01/2006
User offline. Last seen 10 weeks 1 day ago.
More info?

Can you post more info about this? The two links you put in don't seem to be the same thing. Can you post a link to the page that you have a screenshot of? And, which browsers this overlap is happening in?

Also, my experience with z-index has been horrible...I never ever use it because it doesn't seem to be consistently compatible with anything....Use the order of your xhtml code to set levels instead....

-Rob Feature
Geeks and God Co-Host
www.bobchristenson.com

-Rob Feature
Geeks and God Co-Host
www.mustardseedmedia.com

Joined: 07/24/2007
User offline. Last seen 44 weeks 3 days ago.
Now how does that work, how

Now how does that work, how can I have a div overlap another item in a div, by xhtml code?
Depiction Media.com
"Where An Idea Becomes ART!"

Check out our Affiliates
Shopwithcomfort.com
"Shopping With Ease!"

Follow me on twitter : http://twitter.com/svjenkinsjr

G&G Podcast Host
Rob Feature's picture
Joined: 06/01/2006
User offline. Last seen 10 weeks 1 day ago.
Order of html and position

To do overlapping divs without z-index. you just need your xhtml to be ordered correctly, and then use positioning...

With the html, whatever div is first will be underneath any divs that come later. So, whatever div you want on top should come after the div that slides underneath. That's step one.

By default, divs won't overlap, obviously, so step 2 is to reposition your divs using either the position attribute or the margin attributes. For example, if you have 2 divs side by side, and the div on the right came second in the html code (obviously) you coudl set:

position: absolute;
left: 0px;
top: 0px;

and it then actually be sitting directly on top of the other div (which would also be placed at the top left of the containing div).

Or (and correct me if I'm wrong, I don't usually use this behavior but I believe it works), on that right hand div you could simply do:

margin-left: -50px;

and it woudl slide 50 pixels left, right overtop of the other div.

That's the kind of stuff you'd do to overlap things without using z-index. Hope it helps!

-Rob Feature
Geeks and God Co-Host
www.bobchristenson.com

-Rob Feature
Geeks and God Co-Host
www.mustardseedmedia.com

Positioning not working?!

Hello everyone,

I have just tried Rob Feature's solution...but somehow I don't get this working.

On the left-side of my layout I have a vertical 'accordion menu' in DIV...with to the right next to it the content in another DIV. When the content is a portfolio page with images I would like to present a little description of a image on MouseOver and 'displayed below the 'accordion menu''.

Using the z-index:0; on the 'accordion menu' DIV and z-index:1; on the content DIV doesn't work, so I was looking for a solution and stumbled upon this page.

When I try the solution Rob mentions, with the positioning...it also doesn't work. Rob pointed out that one DIV should come after another in the HTML...but this was fine...and it doesn't work.

The 'tooltip' I present in the content DIV is positioned absolute...but dissapears under the 'accordion menu' DIV. And the DIVs are put correctly in orde in the HTML.

What could I be doing wrong?