I added a button to open a modal when clicked. It works when at the top of the page but when you scroll further down and try to click it, the button no longer opens up the modal. I've put only the code used for the modal and button without the rest of the site code into it's own file to test it and it works just fine so it has to be something somewhere else in the code affecting it. Here's the GitHub link: https://github.com/xman2156/TOH

CodePudding user response：

Your button appears early in the markup, and is positioned but doesn't have a z-index set. However, it has later siblings which are also positioned without z-index set, notably <div class="tab">, which means it will appear on top of your button in the z-index and block clicks through to it.

If you apply z-index: 1; to your button, that will move it in front of the div that's currently in the way. If you need to ensure it's always on top of other content, you might find it useful to wrap the rest of your content in a single element that creates a separate stacking context, for example by applying position: relative;.

For some more information on stacking contexts and using z-index, here is a link that I find is a useful reference: What no one told you about z-index

CodePudding user response：

set z-index:1000 for both #info and #infoBtn it'll solve your problem. I tried it.