编写HTML把body的内容隐藏,当为html和body隐藏overflow-x时,页脚中的链接无法点击(底部固定和后面的内容)...

情况：

给出以下简化的HTML示例：

>将内容放在内容后面,使其成为底部粘性

>滚动到页面末尾时：页脚将从后面的内容中解开

我能够做到这一点,但当我有html和body都设置它的overflow-x属性隐藏页脚中的链接是不可点击的.

更新情况：

我知道可以将#content的z-indices设置为2,将footer设置为1以使链接可以点击,但这会干扰来自页面不同部分的multizoom.js,这不是我感兴趣的.

题：

什么设置overflow-x到html和body与页脚中的链接？为什么两个元素都必须设置此属性？ (如果只有其中一个省略溢出-x链接是可点击的)

实际上对我而言,不再在原始项目中设置overflow-x是没有问题的,因为它是过时样式尝试的遗留物并且已经被删除了.但我很好奇为什么会有这么奇怪的行为？

例：

/* 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;

}

Here is the content, scroll down until end of page

Here is the footer link (not clickable at the moment)