cómo colocar un elemento encima de otro elemento?

Question

Tengo un menú y un cuadro de búsqueda. Me gustaría poner el cuadro de búsqueda junto con los elementos del menú. Pero mi menú se está construyendo en un archivo diferente en un div llamado 'custommenu' que utiliza el siguiente 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; 
} 

Mientras que tengo mi cuadro de búsqueda en un archivo separado que se parece a esto:

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

he intentado añadir lo siguiente al archivo CSS para que el cuadro de búsqueda en la parte superior viene del menú, pero no funcionó

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

Aún así el cuadro de búsqueda que se oculta detrás del menú. Me gustaría tener el cuadro de búsqueda en el menú. ¿Cómo lo hago?

EDIT: Aquí está el css de los divs que contiene el cuadro de búsqueda,

.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; } 

Y así es como se ve en este momento, (enlaces púrpura - acceso rápido, caja blanca es la búsqueda que va detrás de la zona rosa 'custommenu'. me gustaría tener el cuadro blanco en la zona rosa. Y todo esto está dentro de 'cabecera')

Answer 1

@all

Lo siento por responder muy tarde. Pero encontré la solución después de un poco de manipulación. Establecí el índice Z de mi encabezado en un valor más alto que mi menú personalizado. Como mi encabezado contiene el cuadro de búsqueda, debe tener un valor más alto para que el cuadro de búsqueda aparezca en el menú.

El código es el siguiente ahora

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

Esta perfectamente tengo mi cuadro de búsqueda en la parte superior de mi menú alineados. Gracias de nuevo por todos los que ayudaron. Lo aprecio.

Answer 2

intento con float? o display:block;
Si yo estaba usando este código, escribiría el css de esta manera:

position:relative; 
left:some value; 
top:some value; 
Z-index: -999 

Answer 3

El cuadro de búsqueda que aparece detrás del menú suena como un problema de índice z - tal vez el contenedor del menú tiene un mayor z-index al cuadro de búsqueda, intente cambiar el índice de búsqueda z-index a 999999.

Answer 4

z-index requiere un posicionamiento no estático; sin embargo, no está claro en los ejemplos de su código qué tipo de posicionamiento utilizan realmente los elementos que está intentando apilar con z-index.

De cualquier manera aquí hay una herramienta muy útil que puede ayudarlo a determinar qué tipo de posicionamiento debe usar para sus elementos en relación con su relación.

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp