Positioning with position: absolute

Hello! I, as a novice developer, do not understand the logic of the Firefox browser. The pages of the book on the site http://mybook.stariki.team/ have their own serial number Z-index and are located one above the other with position: absolute. Test case: 1. Go to the browser Firefox. 2. Hover the mouse over the book. 3. Right-click on the book. 4. Choose from the list - Explore the item Question: Why in the debugger I get to the subordinate element in the DOM page with data-number = 3 and Z-index = 496? !! By what logic did the browser select a page from the middle of the layers located in absolute? Although the top of the book is the page data-number = 0! When you click the book with the left mouse button, the browser decides to work with the data-number = 3 page and Z-index = 496.