Các liên kết không thể nhấp được do z-index

Question

Tôi có một vị trí tuyệt đối trên một trang chồng chéo lên một div khác khi cuộn. Tôi muốn làm cho nó vô hình khi nó cuộn đến một div cụ thể.

Vì mục đích đó, tôi đang sử dụng z-index. Tôi đang thiết lập z-index 1 của div mà tôi muốn ẩn, và cao hơn nhiều z-index cho div khác. Tuy nhiên nó không giấu div. Nếu tôi đặt z-index thành -1 thì nó sẽ ẩn nhưng sau đó các liên kết trên div đó sẽ không thể nhấp được nữa. Làm thế nào tôi có thể sửa lỗi này?

Dưới đây là mã của tôi:

HTML:

<div class="wrap"> 
    <div class="up"><div class="box"><a href="#">Should hide</a></div></div> 
    <div class="down">Should be visible</div> 
</div> 

CSS:

.wrap{ 
    width: 300px; 
    position: relative; 
    overflow: hidden; 
    border: 1px solid #000; 

} 
.up{ 
    height: 100px; 
} 

.box{ 
    position: absolute; 
    top: 20px; 
    background: yellow; 
    width: 100px; 
    height: 100px; 
    z-index: -1; 
} 

.down{ 
    background: green; 
    overflow: hidden; 
    z-index: 200; 
    height: 400px; 
} 

Vì vậy, các vấn đề trong ví dụ trên là các liên kết trong .box không có thể nhấp (vì giá trị -ve z-index) và nếu tôi đặt nó là dương, nó sẽ không ẩn đằng sau .xuống.

JSFiddle: http://jsfiddle.net/G2xRA/

Answer 1

Thực tế z-index chỉ hoạt động với position vì vậy tôi đã cung cấp số position:relative; cho lớp học .down của bạn.

Xem bên dưới được đề cập CSS & DEMO.

.box{ 
     position: absolute; 
     top: 20px; 
     background: yellow; 
     width: 100px; 
     height: 100px; 
     z-index: 1; 
    } 

    .down { 
     background: none repeat scroll 0 0 green; 
     height: 400px; 
     overflow: hidden; 
     position: relative; 
     z-index: 2; 
    } 

DEMO

Answer 2

Để cho z-index để đi trên đầu trang của mỗi khác, bạn sẽ cả hai yếu tố để có vị trí.

Một mô tả tốt hơn:

Định nghĩa và cách sử dụng

Thuộc tính z-index xác định thứ tự chồng của một phần tử.

Phần tử có thứ tự chồng lớn hơn luôn ở phía trước phần tử có thứ tự ngăn xếp thấp hơn.

Lưu ý: chỉ mục z chỉ hoạt động trên các phần tử vị trí (vị trí: tuyệt đối, vị trí: tương đối hoặc vị trí: cố định).

Vì vậy, bạn sẽ cần:

.up { 
    height: 100px; 
    position: absolute; 
} 

Answer 3

.box{ 
    position: absolute; 
    top: 20px; 
    background: yellow; 
    width: 100px; 
    height: 100px; 
    z-index: 1; 
} 

.down{ 
    background: green; 
    overflow: hidden; 
    z-index: 2; 
    height: 400px; 
    position:relative; 
} 

Thực hiện các thay đổi 2 trong các lớp học. Z-index sẽ không hoạt động .down khi bạn không đặt vị trí. Và, không cần chỉ số z-in trong .box. Z-index hoạt động như các lớp, một phần tử với z-index 1 sẽ nằm dưới bất kỳ phần tử nào có chỉ số z cao hơn 1. Ofcourse cho việc này để làm việc các phần tử cần được định vị.

Answer 4

tôi đã cùng một vấn đề quá. Tôi đã giải quyết nó bằng cách thay đổi các giá trị z-index có giá trị lớn hơn -1.

Tôi đã tạo lớp mặt trước 2 và sau 1, vì vậy nó hoạt động.