Đặt các nút và liên kết qua tập lệnh particle.js (chỉ mục Z)

Question

Tôi đang cố gắng sử dụng tập lệnh particles.js, vì vậy các hạt sẽ trôi nổi trên toàn bộ trang (với nền trong suốt). Tôi cần phải kéo một số các liên kết và các nút trên các hạt, vì vậy họ sẽ có thể nhấp.

Liên quan đến link, tôi có thể đặt phần tử "C" lớn hơn phần tử "B" lớn trong khi có phần tử "b" nhỏ trên phần tử "C" lớn không?

Điều tôi đã nghĩ là tương đối có nghĩa là chỉ số z liên quan đến cha mẹ của nó trong khi nếu tôi đặt tất cả các phần tử thành tuyệt đối, hiển thị chữ "b" nhỏ "C" lớn nhất có thể, nhưng không phải. Bất cứ ai có thể giải thích nó cho tôi?

<div id="A">A<div id="a">a</div></div> 
<div id="B">B<div id="b">b</div></div> 
<div id="C">C<div id="c">c</div></div> 

Answer 1

Vị trí không tham chiếu đến chỉ mục z. Nó đề cập đến vị trí x, y trên màn hình. Đọc về thuộc tính vị trí css here.

chỉ mục z chỉ là vị trí tuyệt đối trên trục z. Do đó, chỉ số cao hơn ngăn xếp trên mức thấp hơn.

Vị trí vẫn có hiệu lực trên trục z cho div bên ngoài div của bạn, vì các giá trị khác nhau ngụ ý các đơn đặt hàng hiển thị khác nhau. Bạn có thể thấy hiệu ứng này nếu bạn mở công cụ nhà phát triển chrome trên trang bạn đã cung cấp và thay đổi A từ tĩnh thành tương đối.

Mặc dù A có chỉ mục là 37, nó sẽ ở trên B vì nó được hiển thị sau A. Để z-index hoạt động đáng tin cậy, bạn nên xếp chồng lên nhau.

Nếu bạn mở ví dụ về hạt codepen và mở công cụ nhà phát triển chrome, bạn có thể thấy cách hộp FPS hoạt động lạ nếu bạn nhấp vào chi tiết. Điều này là cho nó nằm ngoài div particle.js.

Tóm lại, nếu bạn muốn xem điều gì đang diễn ra, hãy sử dụng công cụ phát triển trong chrome. Firefox, Opera và IE có các công cụ tương tự.

Đây là ví dụ hoạt động trên codepen. Thêm lớp css của bạn và đặt div trên trang:

.test { 
    index: 50; 
    top: 100px; 
    position: absolute; 
} 

Answer 2

Những gì tôi sẽ đề nghị được, đưa ra một giá trị cao z-index cho bạn a (ví dụ z-index:9999;) nhưng đảm bảo các yếu tố mẹ của a không có giá trị z-index nhỏ hơn vì chỉ mục z của một phần tử sẽ bị giới hạn bởi giá trị do cha mẹ đặt.

Vì vậy, câu hỏi của bạn "nào tôi có thể đặt lớn '' nguyên tố trên lớn 'C B' yếu tố trong khi có nhỏ '' tố trên lớn 'b C' yếu tố?", câu trả lời là không bởi vì chỉ số z của phần tử "b" nhỏ của bạn sẽ bị giới hạn bởi phần tử cha của nó, là phần tử "B" lớn và phần tử "B" lớn nằm bên dưới phần tử "C".

Here's a working sample với số .container hiển thị bên dưới các hạt trong khi có liên kết hoạt động.Điều quan trọng là bạn nên có điều này:

a{ 
    position:relative; 
    z-index:9999; 
} 

Và chắc chắn rằng phụ huynh (trong trường hợp này, các .container) phải có giá trị z-index của 9999 hoặc cao hơn (hoặc bất kỳ giá trị lớn hơn z-index của mẫu này), nếu không sẽ giới hạn chỉ số z của a và nếu nó thấp hơn chỉ số z của mẫu, các nút sẽ không thể nhấp được.

Nếu bạn có nút có hình nền chắc chắn, tôi khuyên bạn nên đặt kiểu trên phần tử giả cho a với chỉ mục z thấp hơn để cho phép các mẫu xuất hiện trên đó, đồng thời duy trì khả năng nhấp của liên kết a.