two divs over lapping

Question

So i am trying to do something similar to (How would you make two <div>s overlap?) but put a lot more things at the top of my website, that would include a few div layers. So i want to move an image to the top to be fixed, then over the image i want to put links with menus, as well as a music player iframe with some now playing text next to it...

its in wordpress, so i have all the div things, just not the way to orient them and the css.

Rough draft of what it would look like:

 ____________________________________________________________
|  [           -Logo fixed to top of site-                ]  |
|  [                  [Menu div]                          ]  |
|  [                                                      ]  |
|  [      [music player div]   [html/java div]            ]  |
|  [______________________________________________________]  |
|                                                            |
|                                                            |
|                       [Content]                            ]

Edit: What i am trying to achieve is at (http://ngaradio.org) the "member area", "featured Artist" links are in the right place, right on the yellow, but i want to bring them up front. then i'd like to grab the iframe at the bottom and put it on top too. so far its not working out

What's your question? Just how to do it? It would be good to have a specific question. Right now it sounds like you're asking us to write it all out, or basically do it, for you. — LazerSharks, Feb 23 '13 at 08:32
im sorry. it send before i could add more. am i to post the css and div i got so far to see what im doing wrong? or link website as example? — user2101870, Feb 23 '13 at 08:56

Manoz · Answer 1 · 2013-09-21T06:11:45.797

1

The element you want to show overlapped, you need to give it z-index higher and vice verca for behind elements use lower z-index.

Example- If i have two pictures #Img1 & #Img2 , from now i will overlap image two over image one.How to do it-

#Img1{
z-index:1;
}
 #Img2{
z-index:2;
}

Overlapping image should have higher rate of z-index.

edited Sep 21 '13 at 06:11

answered Feb 23 '13 at 08:58

Manoz

6,507
13
68
114

so index 1 would be ontop of 2? or the other way around? – user2101870 Feb 23 '13 at 09:23

Bernie · Answer 2 · 2013-02-23T09:22:33.383

0

I've had a go at what I think you want. Excuse the terrible colours.

Edit: Use z-index

edited Feb 23 '13 at 09:22

answered Feb 23 '13 at 08:54

Bernie

1,489
1
16
27

two divs over lapping

2 Answers2