Float một div ở trên nội dung trang

Question

Tôi đã triển khai hộp bật lên tự động hiển thị các tùy chọn tìm kiếm. Tôi muốn hộp "nổi" trên tất cả nội dung trang web. Hiện tại, khi hộp được hiển thị nó sẽ thay thế tất cả nội dung bên dưới và trông có vẻ xấu.

Tôi tin rằng tôi đã thử đặt chỉ mục z của div của hộp thành trên phần của nội dung trang còn lại, nhưng vẫn không có may mắn.

Answer 1

Bạn muốn sử dụng absolute positioning.

Một vị trí nguyên tố tuyệt đối là vị trí tương đối so với yếu tố phụ huynh đầu tiên rằng có một vị trí khác hơn là tĩnh. Nếu không có yếu tố như được tìm thấy, các khối chứa là html

Ví dụ:

.yourDiv{ 
    position:absolute; 
    top: 123px; 
} 

Để có được nó để làm việc, phụ huynh cần phải được tương đối (position:relative)

Trong trường hợp của bạn nên làm như sau:

.suggestionsBox{position:absolute; top:40px;} 
#specific_locations_add{position:relative;} 

Answer 2

Sử dụng

position: absolute; 
top: ...px; 
left: ...px; 

Để định vị div. Hãy chắc chắn rằng nó không có một thẻ cha với vị trí: tương đối;

Answer 3

Kết quả c ontainer div có position: relative có nghĩa là nó vẫn còn trong luồng tài liệu và sẽ thay đổi cách bố trí các phần tử xung quanh nó. Bạn cần sử dụng position: absolute để đạt được hiệu ứng 'nổi'.

Bạn cũng nên kiểm tra đánh dấu bạn đang sử dụng, bạn có phantom <li> s không có chứa <ul>, có lẽ bạn có thể thay thế cả div#suggestions và div#autoSuggestionsList với một đơn <ul> và nhận được kết quả mong muốn.

Answer 4

cho z-index:-1 để flash và cung cấp cho z-index:100 để div ..

Answer 5

Vâng, càng cao z-index thì càng tốt. Nó sẽ định vị phần tử nội dung của bạn trên đầu mỗi phần tử khác trên trang. Giả sử bạn có chỉ mục z cho một số thành phần trên trang của mình. Tìm mức cao nhất và sau đó cung cấp chỉ số z cao hơn cho phần tử bật lên của bạn. Bằng cách này nó sẽ chảy ngay cả trên các yếu tố khác với z-index. Nếu bạn không có chỉ mục z trong bất kỳ phần tử nào trên trang của mình, bạn nên cung cấp như z-index: 2; hoặc cái gì đó cao hơn.