Links in footer unclickable (bottom-fixed and behind content) when overflow-x is hidden for html and body

Situation:

Given the following simplified HTML example:

put a footer behind content, make it bottom-sticky
when scrolling to the end of page: footer shall unravel from behind content

I was able to do this but when I have html and body both set it's overflow-x property to hidden those links in the footer are not clickable.

Update to situation:

I know that it's possible to set z-indices for #content to 2 and for footer to 1 to make the links clickable, but that interferes with a multizoom.js from a different part of the page and is not of my interest.

Question:

What has setting overflow-x to both html and body to do with the links in the footer? And why must both elements set this property? (If just one of them omits overflow-x the links are clickable)

In fact for me it's no problem anymore not to set overflow-x in the originating project because it was a leftover from an outdated styling attempt and has been removed already. But I am curious why there's such a strange behaviour?

Example:

/* This statement prevents the links in the footer
 * from being clickable */
html, body {
  overflow-x: hidden;
}
/* necessary statements to put footer behind content and
 * make it bottom sticky behind content */
#content {
  /* opaque bg color to block out footer*/
  background: lightgrey;
  /* border bottom to see where content ends */
  border-bottom: 1px solid black;
  /* arbitrary height as content placeholder to provoke scrolling */
  height: 1500px;
  /* use margin to stretch the page in order for
   * footer to become visible at the end of scrolling */
  margin-bottom: 120px;
}
footer {
  /* bg color to distinguish footer from content */
  background: grey;
  /* make footer 120px high, centered */
  padding: 50px;
  line-height: 20px;
  text-align: center;
  /* put footer one layer behind content so that content scrolls
   * before footer while footer itself is fixed at the bottom */
  z-index: -1;
  position: fixed;
  bottom: 0;
  /* use all the width possible */
  width: 100%;
}
body {
  /* make page use the whole panel */
  margin: 0;
}

<html>
<body>
    <div id="content">
        Here is the content, scroll down until end of page
    </div>
    <footer>
        <a href="#">Here is the footer link (not clickable at the moment)</a>
    </footer>
</body>
</html>

Solution

As I can see its about margin collapsing. Your #content has margin-bottom: 120px it produces blank space at the bottom, and overflow: hidden; produces new formatting context which allows body to be same height as #content block. z-index: -1 pushes footer behind body in this case and you can't click link.

But when you remove overflow property, body will have smaller height than #content because of margin-bottom and #footer became outside of body and after that links become clickable.

Also note that overflow property on viewport does not clip fixed elements which are out of parent, that's why #footer remains visible and active.