ansaurus

Question

I want a toggling div elemenet, to overlap the underlaying content with z-index. How can I achieve this?

Answer 1

+1 A:

Something I have done in the past:

Separate your content into two spans. One span is displayed and the other hidden. When the user want to see the rest of the content, show the other span with the rest of the text.

I use the JQuery toggle() command to make it easier to do.

Chris Brandsma 2009-04-14 21:00:46

Answer 2

A:

I guess you are testing with IE only. Firefox does not have this problem.

This is a known bug in IE, the z-index bug

http://stackoverflow.com/questions/687849/is-z-index-the-only-way-to-force-an-element-to-be-positioned-over-top-of-another/687861#687861

There is a "general" solution using javascript http://mahzeh.org/?p=23

But the best way is to rearrange elements so your expandable element gets on a position over the box below. Try to insert it after the box you want to cover in your HTML and then position above it visually using absolute positioning.

Miquel 2009-04-14 21:07:19

No on the contrary - I've only tested with FireFox! But the second part of your answer solved the problem. I've just had to put the fixed content before the toggling content in the markup, position it absolute, and it workd! Thank you very much. :)PS.: I'm new to the site so maybe my question wasn't coined best.

Tamas Kalman 2009-04-17 16:58:55

You should mark my answer as a solution then ;)

Miquel 2009-04-20 18:26:40

Answer 3

A:

Try:

#container { position: relative; }
#more { position: absolute; display: none; background-color: White;}

<div id="container">
    Lorum <a href="#">click for more</a>
    <div id="more">
       Lorum
    </div>
    <div id="under">
        Underneath text
    </div>
</div>

On event 'click for more' set #more to display: block;

The z-index is implied in this case as #more is before #under in the document tree, and hence has a higher z-index

EoghanM 2009-05-09 16:07:00

Answer 4

+1 A:

I'm not seeing how moving the z-index around is better/more efficient than hiding and showing the content by altering the display attribute on the divs. Is there some reason you want all the content on the page at all times?

b. e. hollenbeck 2009-05-09 16:12:43

ansaurus

tags:

views:

answers:

I want a toggling div elemenet, to overlap the underlaying content with z-index. How can I achieve this?

related questions