Topic: how to overlap some text with a div on toggle?

Hey all,

I use a toggle effect this way:

<%= link_to_function "edit this item", "Element.toggle('editdiv')" %>
<div id="editdiv" style="display:none">
blabla <br>
blabla <br>
blabla <br>
blabla <br>
</div>
<br>
roror <br>
roror <br>
roror <br>

that works great but I would like the content of editdiv to overlap the text that comes next, in other words I want blabla to overlap roror.

Any idea how to do this?

thanx in advance

Pat

Re: how to overlap some text with a div on toggle?

in a style sheet...

#editdiv{
    position:absolute;
    z-index: 10;
}

this will place editdiv on a higher layer and will overlay anything below it.

Is that what you mean?

Re: how to overlap some text with a div on toggle?

yes thanx a lot I also had to add a background color so that I can only see the content of the editdiv. I don't want to see  the text of the first div mixed with the text it's overlapping because then it's unreadable.

So what I did looks like this:

<div id="editdiv" style="display:none;position:absolute; background-color:white;    z-index: 1; ">
blabla <br>
blabla <br>
blabla <br>
blabla <br>
</div>
<div id="editdiv2" style="position:absolute;z-index: -1;">
roror <br>
roror <br>
roror <br>
</div>

Re: how to overlap some text with a div on toggle?

Great Stuff!

Glad to help