ivn ivn - 4 months ago 6
HTML Question

how to position an element on top of another element?

I have a menu and a search box. I would like to put the search box along with menu items. But my menu is being built in a different file in a div called 'custommenu' which uses the following css:

#custommenu {
position:relative;
z-index:999;
font-size: 14px;
margin: 0 auto;
padding: 10px 16px;
width: 918px;
background-color: #FB0A51;
border-top-left-radius: 10px 10px;
-moz-border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
-moz-border-top-right-radius: 10px 10px;
}


Whereas I have my search box in a separate file which looks like this:

<div class="header">
some code
<div class="quick-access">
some code
<php echo $this->getChildHtml('topSearch') ?>;
</div>
</div>


I tried adding the following to the css file so that the search box comes on top of the menu but it did not work

.header .form-search {
position:absolute;
right:29px;
z-index:1000;
top: 80px;
width:315px;
height:30px;
padding:1px 0 0 16px;
}


Still the search box gets hidden behind the menu. I would like to have the search box n the menu. How do i do it?

EDIT: Here's the css of the div's which contains the search box,

.header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;}
.header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; }
.header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; }


And this is how it looks right now, (purple links - quick access, white box is search which is going behind the pink 'custommenu' area. I would like to have the white box on the pink area. And all of this is inside 'header')

z-index issue o/p

ivn ivn
Answer

@all

Sorry for replying very late. But I found the solution after a little bit of fiddling. I set the z-index of my header to a higher value than my custommenu. Since my header contains the search box it needed to have a higher value for the search box to come over the menu.

The code looks like this now

.header{ position: relative; z-index: 4000; }
 .header search { position: relative; z-index: 99999; }
.custommenu { position: relative; z-index: 1000 ;}

This perfectly got my search box on top of my menu aligned. Thanks again for all those who helped. Appreciate it.

Comments