Lỗi liên quan/tuyệt đối của chỉ mục z z-index trong danh sách

Question

Tôi có điều hướng sau trong đó .topNav có vị trí: tương đối và subnav có vị trí: tuyệt đối. Tôi không thể đưa danh sách con xuất hiện trong danh sách chính do các vấn đề về chỉ mục z. Điều này có vẻ là một vấn đề đã biết.

<ul> 
<li class="topNav">About Us 
<ul class="subNav"><li> Subsection A</li><li>Subsection B</li></ul> 
</li> 
</ul> 

Có ai biết cách giải quyết không?

---

CẬP NHẬT http://brh.numbera.com/experiments/ie7_tests/zindex.html thể hiện sự cố mà tôi gặp phải. Bài đăng gốc của tôi nằm trong ngữ cảnh của danh sách nhưng tôi đã giảm vấn đề về việc chỉ mục z có vẻ không hoạt động khi có yếu tố với vị trí: tuyệt đối bên trong phần tử cha với vị trí: tương đối

---

Answer 1

Đây là một bài viết rất hay giải thích các vấn đề xếp chồng mà máy móc đề cập đến.

http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

Những gì bạn có thể muốn xem xét (tùy thuộc vào lý do tại sao bạn đang muốn định vị trên nhiều yếu tố) sẽ bổ sung một selector di chuột để .base (sử dụng JavaScript cho IE6) có thêm lớp để cho nó thuyết tương đối rộng.

.base:hover{position:relative;} 

Điều này có nghĩa là thứ hai .base không có vị trí: tương đối.

Answer 2

Ok, tôi nghĩ rằng vấn đề của bạn có thể xuất phát từ sự thiếu hiểu biết về cách hoạt động của chỉ mục z. Thuộc tính z-index chỉ liên quan đến các phần tử ở cùng cấp trong phân cấp DOM. Nói cách khác, nếu bạn có:

<ul id="a"> 
    <li id="b">b</li> 
    <li id="c">c</li> 
</ul> 
<div id="d"></div> 

và "b" và "c" được tạo kiểu sao cho chúng trùng nhau, chỉ mục z sẽ xác định kết quả nào chồng lên trên cùng. Tuy nhiên, nếu "c" và "d" chồng lên nhau, "d" sẽ luôn ở trên cùng, bất kể chỉ mục z của c là gì, bởi vì các phần tử gần nút DOM gốc hơn sẽ luôn xuất hiện phía trên các phần tử được lồng sâu hơn

Vì vậy, miễn là "subnNav" là con của "topNav", tôi không nghĩ rằng có bất kỳ cách nào để làm cho nó bao gồm nội dung của phụ huynh. Nói cách khác, theo như tôi biết không có giải pháp cho vấn đề này, ngoại trừ việc làm cho "subNav" không phải là con của "topNav".

(LƯU Ý: Tất cả những gì được nói, CSS không đơn giản, vì vậy vẫn có thể có một số cách để có được hiệu ứng bạn muốn mà tôi không biết. Tất cả những gì tôi có thể nói là dựa trên sự hiểu biết của tôi về z-index và kiến ​​thức CSS chung khá tốt của tôi, không có cách nào mà tôi biết.)

Answer 3

Stu Nicholls tại CSSplay có được CSS Based nav w/ 6 level drop down (Có thể được mở rộng đến nhiều hơn nếu cần). Điều này làm việc trong Internet Explorer IE5.5, IE6, IE7, Firefox, Opera và bây giờ là Safari, Netscape 8 và Mozilla.

Answer 4

thêm

background: url(blank.gif); 

cho elemnts hoàn toàn vị trí giải quyết vấn đề đối với tôi.Mybe nó có thể giúp u 2 :)

liên quan

Answer 5

Giải pháp: Sử dụng z-index để

<div class="base" style="z-index:2"> 
<div class="inside"> 
    This has some more text in it. This also has a background. This should obscure the second block of text since it has a higher z-index. 
</div> 
This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it. 
</div> 

<div class="base" style="z-index:1"> 
This is the second div. You should not be seeing this in front of the grey box. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This second box should be obscured by the grey box. 
</div> 

Answer 6

giảm Tôi đã cùng một vấn đề và đã có thể sửa chữa nó Trong IE6 và 7. Kết hợp http://code.google.com/p/ie7-js/ với CSS sau vấn đề đã biến mất. Với vấn đề của tôi, tôi đã có một số mục bên trong một danh sách nổi bên trái và có một chú giải công cụ xuất hiện bất cứ khi nào người dùng di chuột qua li. Để khắc phục nó, tôi adde này:

.ul li:hover {position:relative;z-index:4;} .ul li:hover + li {position:relative;z-index:3;}

Cách nó hoạt động là bất cứ khi nào người dùng di chuột qua LI đầu tiên ví dụ, nó đặt LI thứ hai nổi bên cạnh nó một giá trị z-index thấp hơn. Tất nhiên bạn có thể thay đổi các giá trị z-index để phù hợp với nhu cầu của riêng bạn.

Answer 7

Điều này đã làm điều này cho tôi. ;)

http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/

Answer 8

tương tự để trả lời bởi @Orhaan, thiết lập một tài sản nền để các yếu tố tuyệt đối là giải pháp duy nhất làm việc cho tôi ...

background-color: rgba(0,0,0,0); 

Thanks Alex Leonoard