Make a div overlap another one?

[Mark T.]

Just a simple question: how do I make one <DIV> partially overlap another one? Right now, the one I want to have underneath the other is overlapping the other, if that makes sense .
Is there a trick for this?

- Edit -

I already found my answer, now I know what z-index is for. But I have a new question, it seems it isn't possible for me to layer a <DIV> containing a flash-graphic beneath a <DIV> containing an image. Is this just not possible, or am I using the z-index attribute the wrong way?
I posted my code below:

<div align="center" style="position: absolute; left: 50%; top: 10%; margin-left: -380; width: 760; border-top: 1px solid #000000;" background="images/bodybg.gif">

<div id=logo style="position: absolute; left: 0px; top: 0px; border-left: 1px solid #000000;">
<img src="images/main_01.gif">
</div>

<div id=menu style="position: absolute; left: 168px; top: 30px; z-index: 0;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
 WIDTH=477 HEIGHT=152>
 <PARAM NAME=movie VALUE="Prelim3.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="Prelim3.swf" quality=high bgcolor=#FFFFFF WIDTH=477 HEIGHT=152 
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>
</div>

<div id=tagline style="position: absolute; left: 168px; top: 17px; z-index: 32;">
<img src="images/tagline.gif">
</div>

<div id=news style="position: absolute; left: 0px; top: 150px; z-index: 1299939">

<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td  width="25" height="21" background="Images/menulefttop.gif">
&nbsp;
</td>
<td background="Images/menutopbg.gif">&nbsp;
</td>
<td width="25" height="21" background="Images/menurighttop.gif" style="background-repeat: no-repeat;">
&nbsp;
</td>
</tr>
				
<tr>
<td background="Images/menuleftbg.gif">
&nbsp;
</td>
<td bgcolor="#aaa8a8">
					
<!-- The content for the menu goes here -->
					
<table cellspacing='4' cellpadding='0' bgcolor='#EEEEEE' width='100%' align='center'>
<tr> 
<td><font face="Times New Roman" size="1"><b>Rage Site is up&#33;</b></font></td>
</tr>
<tr> 
<td><font class="body" size="1">Posted on June 12 2002,4:54 </font></td>
</tr>
<tr> 
<td ALIGN="LEFT"> 
<hr noshade size='1' color='#000000'>
<font class="body" size="1">[ <A 
HREF="http://www.rageskatepark.com/cgi-bin/ikonboard/ikonboard.cgi?act=ST&f=11&t=1">View Post</a> |<A 
HREF="http://www.rageskatepark.com/cgi-bin/ikonboard/ikonboard.cgi?act=SF&f=11">Read more news...</A> ]</font> </td>
</tr>
</table>

					
<!-- End of the content area for the menu -->
					
</td>
					
<td background="Images/menurightbg.gif" style="background-repeat: repeat-y;">
&nbsp;
</td>	
</tr>
<tr>
<td  height="21" background="Images/menuleftbottom.gif">
&nbsp;
</td>
<td background="Images/menubottombg.gif">
&nbsp;
</td>
<td background="Images/menurightbottom.gif" style="background-repeat: repeat-y;">
&nbsp;
</td>
</tr>
</table>

</div>


</div>

[creole]

The best way to overlap is to use set z-index of one DIV higher than the other. Then position them accordingly. z-index is the 3rd dimension in web design.

You could also try using negative margins on one element.

[Mark T.]

Well, let me explain a bit more. I got a hold of the z-index a bit now, and posted my code. Something seems to be wrong with it, or this thing does not apply to a <DIV> containing a .swf.
The .swf is about 450px wide and 150 px high, but much of that space is not needed. Only a few elements stick out, and the other part is just whitespace. I want another element of my site, a part of the logo, to fill that whitespace up, but somehow it only moves behind the .swf, and not in front of it as I want it to do .

[creole]

You can't overlap a SWF file. It can't happen.

[Skunk]

Unfortunately swf contents (and ther plugins such as java applets) are always rendered at the "top" of the stack - there is no way of getting something else to overlap them as it will just appear to be underneath. I know this is true in IE, not sure about other browsers. In addition, select menus will also ignore z-index and always appear on top of everything else (this is a known issue, something to do with select boxes being rendered as windows widgets).

[cybercodeur]

I stand with Skunk on this one. I have yet to succeed in positionning a flash file or a form element underneath another positionned layer. As far as I know and as far as my researches have gone, this cannot be done... which is why all flash movies and form elements always end up showing over dhtml menus for instance...

I pray every night that someone would prove me wrong on this, no doubt!

[coffeeKid]

agreed... no can do... i worked on this project for this large client that you've all heard of... well the client insisted on dhtml dropdown nav across the top of the page... and later decided to add banner ads to the pages... too bad a few of those (swf) banners burned through that lovely navigation.