Các liên kết không hoạt động với vị trí tuyệt đối

Question

Tôi có một vị trí tuyệt đối và div với vị trí tương đối. div đầu tiên chứa các liên kết và số div thứ hai chứa một số nội dung vượt quá div đầu tiên. Số div đầu tiên có số z-index trong số 1, trong khi số thứ hai có số z-index của -1 và số div đầu tiên cũng được khai báo trước.

Mặc dù, các liên kết trong div đầu tiên không thể nhấp được. Bây giờ tôi có ý tưởng, tại sao điều này là như vậy.

Fiddle

Cả side1 và side2 sẽ có một hình nền. Và nội dung sẽ xuất hiện ở hai bên, nhưng các liên kết vẫn hoạt động.

Second fiddle

Answer 1

Hoặc thay đổi .side có z-index: 1, hoặc thay đổi #container có margin-top: 150px thay vì padding-top.

#books có z-index trong tổng số 1, nhưng nó bên trong một container với một z-index là -1, vì vậy nó vẫn kết thúc dưới #container trong đó có z-index: -1 nhưng bị trả lại sau (do đó trên).

Answer 2

các liên kết không thể nhấp được vì thẻ div vượt quá nó.

Thẻ này:

<div class="side side2"></div> 

cung cấp cho các yếu tố .side2 một z-index thấp để ẩn nó.

Answer 3

Trong mã của bạn, bạn có

  z-index: -1; 
      position: absolute; 

Tôi nghĩ rằng đây là lý do. Thay đổi số -1 thành 1 khắc phục. Không chắc chắn nếu tôi bỏ lỡ điều gì đó, nếu có, vui lòng giải thích trong phần nhận xét và/hoặc cập nhật câu hỏi.

Answer 4

Div đầu tiên và div thứ hai của bạn, cả hai đều chia sẻ lớp .side, được xác định bằng z-index: -1. Vì vậy, cả hai đều trên cùng một cấp độ ngăn xếp và một trong đó đến cuối cùng trong đánh dấu sẽ được trên đầu trang của trước đó. Tất cả những gì bạn phải làm là cung cấp cho .side1 chỉ số z lớn hơn -1.