2009-03-26 25 views
5

Tôi đang làm việc trên một ứng dụng với một bản đồ và có một div trong góc với một số công cụ trong đó. Bạn có thể nhấp vào bản đồ này để hiển thị một số thông tin trong một cửa sổ nhỏ. Cửa sổ, trong một số trường hợp, được bao phủ bởi div trong góc.Chỉ số z-index là cách duy nhất để buộc một phần tử được định vị trên đầu trang của một phần tử khác, nếu không phải là những gì các phương pháp khác có?

Tôi muốn hiệu ứng ngược lại (bao gồm cửa sổ div). Tôi đã tìm ra điều này chỉ đơn giản là một vấn đề z-index nhưng tôi không thể làm cho nó hoạt động được. Điều này là với IE7 và từ đọc lên một chút có vẻ như z-index sẽ không hoạt động trừ khi nó bên trong của một phần tử được định vị.

Các yếu tố dường như được đặt đúng vị trí để có chỉ số z hoạt động đúng nhưng tôi có chút may mắn. Tôi đã chơi xung quanh với việc thêm phong cách thông qua Firebug nhưng không có bất kỳ may mắn trong việc có được bất cứ điều gì để thay đổi. Cửa sổ thực sự chỉ là hai divs một hoàn toàn vị trí một và một trong những tương đối bên trong của nó.

Chỉ mục z là điều duy nhất có thể là vấn đề ở đây hoặc có điều gì khác mà tôi không biết?

Có phương pháp nào khác để đạt được hiệu quả tôi muốn không? Tôi không thể chỉ đơn giản là ẩn div thông qua jquery hoặc một cái gì đó bởi vì một phần của nó sẽ được nhìn thấy từ phía sau cửa sổ mở ra trên bản đồ.

+0

Có thể hữu ích hơn nếu bạn có thể cung cấp ví dụ về html và css của mình để một số người dùng có thể chẩn đoán tốt hơn mọi sự cố. – TheTXI

Trả lời

8

Bạn đang nhấn xếp bối cảnh lỗi

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Mỗi div vị trí trong IE sẽ tạo ra một bối cảnh xếp chồng mới và ngăn chặn z-index từ khác nhau ngữ cảnh xếp chồng đến trên đầu của người khác.

Giải pháp là để có cửa sổ bạn muốn trên cùng trong cây (ví dụ như trong cơ thể) và giá trị z-index vắt hơn chỉ mục z của tất cả các bậc cha mẹ của div khác bao gồm cửa sổ của bạn.

thông tin rộng rãi để hiểu được vấn đề ở đây: http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

+0

Tìm hiểu điều gì đó mới mỗi ngày tôi giả sử. Cảm ơn. – Carter

1

định vị và tiêu cực lề là cách duy nhất để có được các yếu tố để chồng lên nhau mà tôi biết. z-index chỉ được sử dụng để cho trình duyệt biết cách lớp các phần tử một cách rõ ràng.

về vấn đề của bạn, IE yêu cầu các thành phần vùng chứa và/hoặc các thành phần mà bạn đang chồng chéo để có position:relative; hoặc position:absolute; để chỉ mục z hoạt động bình thường. Khi ai đó nói vị trí họ thường ngụ ý có thuộc tính position được đặt trong CSS. Ngoài ra, khi làm việc với z-index, hãy đảm bảo rằng phần tử chồng chéo có cùng cấp với nhau.

Hope this helps

0

Như lời đề nghị bởi các câu trả lời khác, position:relativeposition:absolute thiết lập lại "xếp bối cảnh" trong IE.

0

Nếu bạn muốn có câu trả lời dễ hơn, bạn có thể sử dụng javascript và ẩn div khi bạn nhấp vào bản đồ và hiển thị nó khi bạn đóng bản đồ.

Bạn sẽ phải thực hiện việc này với bất kỳ lựa chọn nào trên trang, bởi vì tức là chúng không hoạt động với chỉ mục z.

0

Tôi đã gặp phải vấn đề tương tự này vài ngày trước và nhận thấy số dư âm như đề xuất của Darko Z đã hoạt động rất tốt.(Đại diện của tôi chưa đủ tốt để bỏ phiếu cho Darko)

Tôi đã viết một bài đăng nhanh về nó.

http://www.swards.net/2009/03/layering-html-elements-without-using.html

1

Rất đơn giản, thứ tự của các yếu tố trong tập tin HTML của bạn sẽ quyết định xếp theo thứ tự. Nếu bạn muốn một phần tử nằm trên một phần tử khác thì hãy đảm bảo rằng phần tử đó xuất hiện sau trong HTML.

Bạn chỉ có thể hoán đổi thứ tự xếp chồng trên các phần tử nằm trong cùng một phần tử chứa. Ví dụ: nếu bạn có hai div và cả hai đều chứa 3 hình ảnh, bạn không thể tạo hình ảnh từ div thứ hai đi bên dưới hình ảnh từ div đầu tiên.

Bạn cần lập kế hoạch HTML của mình trước nếu bạn cần các đơn đặt hàng xếp chồng phức tạp.

Các vấn đề liên quan