jak umieścić element na wierzchu innego elementu?

Question

Mam menu i pole wyszukiwania. Chciałbym umieścić pole wyszukiwania wraz z elementami menu. Ale moje menu jest budowany w innym pliku w div o nazwie „custommenu” który wykorzystuje następujące 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; 
} 

Podczas gdy mam pole wyszukiwania w oddzielnym pliku, który wygląda tak:

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

próbowałem dodanie następujących do pliku css tak, że pole wyszukiwania przychodzi na górze menu, ale to nie działa

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

Wciąż pole wyszukiwania zostanie ukryty za menu. Chciałbym mieć pole wyszukiwania w menu. Jak mam to zrobić?

EDIT: Tutaj jest css div, który zawiera pole wyszukiwania,

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

I tak to wygląda teraz, (purpurowe linki - szybki dostęp, białe pudełko jest wyszukiwarka, która będzie Za pink „custommenu” obszar. Chciałbym mieć białe pole na różowym obszarze. A wszystko to jest w środku „header”)

Answer 1

@all

Przepraszam za odpowiedzi bardzo późno. Ale znalazłem rozwiązanie po odrobinie manipulowania. Ustawiłem indeks z mojego nagłówka na wyższą wartość niż mój komiks. Ponieważ mój nagłówek zawiera pole wyszukiwania, musi mieć wyższą wartość pola wyszukiwania, aby przejść do menu.

Kod wygląda to teraz

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

tym doskonale dostałem polu wyszukiwania na górze mojego menu wyrównane. Jeszcze raz dziękuję za wszystkich, którzy pomogli. Doceniam to.

Answer 2

Spróbuj z float? lub display:block;
Gdybym był przy użyciu tego kodu, chciałbym napisać css tak:

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

Answer 3

Pole wyszukiwania pojawiają się za menu brzmi jak problemu z-index - być może pojemnik z menu ma wyższy z-index do pola wyszukiwania, spróbuj zmienić indeks z-index na 999999.

Answer 4

z-index wymaga pozycjonowania niestatycznego, jednak z przykładów kodu nie wynika, który typ pozycjonowania jest faktycznie używany przez elementy, które próbujesz stos z z-index.

Tak czy inaczej jest to bardzo pomocne narzędzie, które może pomóc w określeniu, jakiego rodzaju pozycjonowania należy użyć w odniesieniu do elementów w odniesieniu do ich związku.

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