superimpose <DIV> blocks

anshul · August 18th, 2004, 05:08 PM

we can superimpose two <DIV> blocks using 'position:absolute'
can we do it trick more gracefully with some css1 or css2 thing without 'position:absolute' ?

i m just asking.

Christiaan van Opstal · August 24th, 2004, 07:51 AM

To superimpose two <DIV> tags you can use the z-index property. Position the <DIV> tags wherever you want on your page using position:absolute and the top/left commands and then use the z-index property to order the divs anyway you want. You can superimpose as many <DIV> tags on top of each other as you want as long as you keep increasing their z-index value. The <DIV> with the highest z-index value will appear on top. Like so:

Code:

<style type="text/css">
.floater {
    position:absolute;
    width:160px;
    }

#bottom {
    background:yellow;
    }

#middle    {
    z-index:1;
    top:25px;
    background:blue;
    }

#top    {
    z-index:2;
    top:35px;
    background:green;
    }
</style>

[...]

<div id="top" class="floater">This is on the top</div>
<div id="middle" class="floater">This is in the middle</div>
<div id="bottom" class="floater">This is on the bottom</div>

anshul · August 26th, 2004, 02:35 PM

thank u.
but you are fixing the <DIV>s ( absolute positioning );
this is not desired.

Christiaan van Opstal · August 26th, 2004, 11:21 PM

My apologies. There's no other way that I'm aware of to position div tags without using the 'position' attribute of the divs.

richard.york · August 27th, 2004, 05:03 PM

Why is absolute positioning less graceful? What is the effect that you desire? Can you show us an example?

Divs can overlap eachother without absolute positioning. Specify relative positioning and use margins or offset properties to control the position and the z-index to control the layering. Relative positioning means the element doesn't leave the normal flow, whereas absolute positioning does.

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail

anshul · September 5th, 2004, 02:16 PM

idea behind relative positioning is to let DIVs come freely, float or adjust 'top to bottom' of page.
a simple mistake in absolute positioning, though can make DIVs 'shunt' when browser-type change.

i've to overlap DIVs for http://www.mediasworks.com/webstory/cghost/home.htm

i don't if i've some good way2super-impose. that i meant.
no a big problem, then and now, though.