cách đặt một phần tử lên trên một phần tử khác?

Question

Tôi có một menu và một hộp tìm kiếm. Tôi muốn đặt hộp tìm kiếm cùng với các mục menu. Nhưng trình đơn của tôi đã được xây dựng trong một tập tin khác nhau trong một div gọi là 'custommenu' trong đó sử dụng css sau:

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

Trong khi tôi có hộp tìm kiếm của tôi trong một file riêng biệt mà trông như thế này:

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

tôi đã cố gắng thêm dòng sau vào file css để các hộp tìm kiếm đến trên menu nhưng nó đã không làm việc

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

Tuy hộp tìm kiếm được ẩn đằng sau menu. Tôi muốn có hộp tìm kiếm n menu. Tôi phải làm nó như thế nào?

EDIT: Đây là css của của div chứa các hộp tìm kiếm,

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

Và đây là cách có vẻ ngay bây giờ, (liên kết màu tím - truy cập nhanh, hộp màu trắng là tìm kiếm mà đang xảy ra đằng sau khu vực 'custommenu' màu hồng. tôi muốn có hộp màu trắng trên diện tích màu hồng. Và tất cả điều này là bên trong 'tiêu đề')

Answer 1

@all

Xin lỗi vì trả lời rất muộn. Nhưng tôi đã tìm ra giải pháp sau một chút không quan trọng. Tôi đặt z-index của tiêu đề của tôi thành một giá trị cao hơn so với custommenu của tôi. Vì tiêu đề của tôi chứa hộp tìm kiếm, cần có giá trị cao hơn cho hộp tìm kiếm để xem qua trình đơn.

Mã này trông như thế này tại

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

này một cách hoàn hảo có hộp tìm kiếm của tôi trên đầu trang của trình đơn của tôi liên kết. Cảm ơn một lần nữa cho tất cả những người đã giúp đỡ. Cảm kích điều đó.

Answer 2

Hãy thử với float? hoặc display:block;
Nếu tôi đã sử dụng mã này, tôi sẽ viết css như thế này:

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

Answer 3

Hộp tìm kiếm xuất hiện đằng sau menu âm thanh như một vấn đề z-index - có lẽ container của menu có cao hơn z-index vào hộp tìm kiếm, hãy thử thay đổi z-index của hộp tìm kiếm thành 999999.

Answer 4

z-index yêu cầu định vị không tĩnh tuy nhiên nó không rõ ràng từ ví dụ mã của bạn, loại định vị nào thực sự được sử dụng bởi các yếu tố bạn đang thử để ngăn xếp với z-index. Một trong hai cách ở đây là một công cụ rất hữu ích có thể giúp bạn xác định loại định vị bạn phải sử dụng cho các yếu tố của bạn liên quan đến cách chúng liên quan.

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