Help with this div - can I overlap divs?

Question

Hello there, I used the search function to find an answer to this, but got nothing concrete so thought I should make this thread
My problem is shown in the screenshots below. I created a div id for the banner, a div id for the button "home". There is a Div ID for the stuff below, and that stuff is put into div classes
My problem is, I want to put that home button over the gre banner (and other buttons). When I try shifting the button over the banner, instead of shifting over the banner, it shifts the banner away and just pushes it. The screen shot is below showing the before and after, as well as the css:
[img]http://i1006.photobucket.com/albums/af186/RC20087765/Fig1designview.jpg?t=1292783483[/img]
[img]http://i1006.photobucket.com/albums/af186/RC20087765/Fig1csscode.jpg?t=1292783852[/img]
^^ the css for that. The name of the button is "home" and it is a DIV ID
This is what happens when I changes the margin left to 80pixes instead of 50 pixels (i.e. when i tried moving it to the right)
[img]http://i1006.photobucket.com/albums/af186/RC20087765/fig2designview.jpg?t=1292783939[/img]
All I want to do is place that home button on the grey banner! And later on, I will put some other buttons up there, but for now thats what I want to do
If someone can just tell me how to put a div over another div, I would be so grateful! Thanks guys.

Answer 1

Yes you can place one div over another div by using z-indexing (giving the <div> a stacking order). BUT, z-indexing only works with <div>s that have a declared position, like position:absolute (or relative). z-indexing and declared position have to be used together.
From and old post:
One more thing about positioning. z-indexing only works with elements that have a declare position like absolute or relative, and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
So
Code:
#flash {
z-index:5;
will not work without ALSO giving it a declare position.
But the actual display of #flash will very depending on whether or not it's parent container (<div>) also has a declared position.
That is, if it's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So be sure to give a declared position to both the parent and the child <div>.
Example page using declared positions and z-indexing to sandwich Flash between 2 layers of text:
http://www.cidigitalmedia.com/tutorials/flash_div.html
View the source code or copy it and practice by changing z-index and positions.
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
More info here:
http://www.w3schools.com/css/pr_pos_z-index.asp
Best of luck to ya!
Adninjastrator