come posizionare un elemento sopra un altro elemento?

Ho un menu e una casella di ricerca. Vorrei mettere la casella di ricerca insieme alle voci di menu. Ma il mio menu è in costruzione in un file diverso in un div chiamato 'CustomMenu', che utilizza il seguente CSS:come posizionare un elemento sopra un altro elemento?

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

Mentre io ho la mia casella di ricerca in un file separato che assomiglia a questo:

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

ho provato ad aggiungere il seguente al file CSS in modo che la casella di ricerca arriva in cima al menu, ma non ha funzionato

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

Ancora la casella di ricerca viene nascosto dietro il menu. Mi piacerebbe avere la casella di ricerca nel menu. Come lo faccio?

EDIT: Ecco il CSS del div che contiene la casella di ricerca,

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

E questo è come appare in questo momento, (viola collegamenti - l'accesso rapido, la scatola bianca è la ricerca che sta dietro la area rosa 'CustomMenu'. mi piacerebbe avere la casella bianca sulla zona rosa. E tutto questo è dentro 'header')

z-index issue o/p

fonte

2012-03-29 ivn

E 'una svista o intenzionale che il PHP non ha un tag di chiusura? – Josh

Assicurarsi che l'elemento padre abbia una posizione di relativo. Assicurati anche che l'elemento genitore abbia uno z-index. Questo aiuterà a correggere un bug in IE. –

O un tag di apertura non valida: ''

@all

dispiace per la risposta molto tardi. Ma ho trovato la soluzione dopo un po 'di giocherellare. Ho impostato lo z-index della mia intestazione su un valore superiore al mio custommenu. Dato che la mia intestazione contiene la casella di ricerca, era necessario avere un valore più alto per la casella di ricerca per passare dal menu.

Il codice simile a questo ora

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

Questo perfettamente ottenuto la mia casella di ricerca in cima alla mia menù allineati. Grazie ancora per tutti coloro che hanno aiutato. Apprezzalo.

fonte

2012-04-03 12:28:39 ivn

Prova con float? o display:block;
Se stavo usando questo codice, vorrei scrivere il CSS in questo modo:

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

fonte

2012-03-29 14:26:24

usa float: lasciato all'elemento padre. e se vuoi questo. chiarire entrambi. se non ti piace float: vai con: display: inline-block;
e * display: inline;
e Zoom: 1; –

float non funziona perché sposta anche il div "accesso rapido". Voglio spostare solo la casella di ricerca che è rappresentata da '.header .form-search' – ivn

La casella di ricerca che appare dietro il menu suona come un problema di z-index - forse il contenitore del menu ha un più alto z-index alla casella di ricerca, prova a cambiare la casella di ricerca z-index a 999999.

fonte

2012-03-29 14:29:52

Quel lavoro di dint. Ho allegato lo screenshot e ho elaborato di più il mio problema, se questo ti dà qualche idea. – ivn

Ciao c'è un URL pubblico in cui possiamo guardare questo. - Posso vedere È la scatola rosa che si trova in cima alla casella di ricerca. Questi sono di solito abbastanza facili da risolvere una volta guardati con qualcosa come firebug o strumenti di sviluppo ecc. –

Ho paura che sia sul mio localhost e quindi non posso fornirti alcun URL pubblico per dare un'occhiata a questo. Tuttavia, se tu potessi dirmi quali elementi sospetti potrebbero causare il problema, posso cercare in firebug e posso scriverlo su di essi qui. – ivn

z-index richiede il posizionamento non statico ma non è chiaro dal codice di esempio che tipo di posizionamento viene effettivamente utilizzato dagli elementi che stai provando impilare con z-index.

In entrambi i casi qui è uno strumento molto utile che può aiutare a determinare quale tipo di posizionamento è necessario utilizzare per i vostri elementi per quanto riguarda il modo in cui si riferiscono.

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

fonte

2012-03-29 14:40:46 brezanac

Ho modificato la mia domanda. Per favore guarda. – ivn

come posizionare un elemento sopra un altro elemento?

risposta

Problemi correlati