当 html 和正文隐藏 overflow-x 时，页脚中的链接不可点击（底部固定和内容后面）

Question

情况：

给定以下简化的 HTML 示例：

在内容后面放一个页脚，使其置顶
滚动到页面末尾时：页脚应从内容后面展开

我能够做到这一点，但是当我有 html 和 body 时，它们都将 overflow-x 属性设置为 hidden 页脚中的那些链接不可点击。

情况更新：

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

问题：

将 overflow-x 设置为 html 和 body 与页脚中的链接有什么关系？为什么 both 元素必须设置这个属性？（如果其中一个省略 overflow-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;
}

<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>

Answer 1

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?

如你所说it will work when you remove style from html.

为什么人们使用 html 标签？

目前我遇到过至少三种人风格html。

当他们想要为那些设置全局属性值时继承了他们祖先的价值观。
当他们想要强制浏览器显示滚动条时。
```
html, body {
    min-height: 100.1%;
}
```
当他们想要 table 离开页面时。

我们可以设置 html 的样式，因为它是 DOM 具有正常属性的元素 (W3 on html)，但据我所知，很多其他人都强烈建议避免使用它，除非你想用它做一些很酷的技巧。由于浏览器的工作方式，样式 html 可能会导致不需要的行为。请记住 body 不是 html 的唯一子代。还有head。当您想为页面的可见部分设置样式时，您已经获得了 body（为什么首先设置不可见部分的样式？）。

Answer 2

正如我所看到的，它是关于边距崩溃的。你的 #content 有 margin-bottom: 120px 它在底部产生空白 space，并且 overflow: hidden; 产生新的格式化上下文，允许正文与 #content 块高度相同。在这种情况下，z-index: -1 将 footer 推到 body 之后，您无法单击 link。

但是当你删除overflow 属性时，body的高度会比#content小，因为margin-bottom和#footer在外面body 之后 link 变为可点击。

另请注意，视口上的 overflow 属性不会剪辑父元素之外的固定元素，这就是 #footer 保持可见和活动的原因。

Answer 3

问题似乎是页脚的 z-index 为负而正文没有（所以默认为 0？）。将 overflow-x: hidden 放入正文的 css 语句中，将正文扩展到页脚（原因请参见 t1m0n 的回答为什么）。

向 body 添加较低的 z-index 并使其相对定位修复了 Chrome、IE、Firefox 和 Edge 上的问题。

body {
  position: relative;
  z-index: -2;
}

/* This statement prevents the links in the footer
 * from being clickable */
html, body {
  overflow-x: hidden;
}
body {
  position: relative;
  z-index: -2;
}
/* 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 (IS CLICKABLE NOW!!)</a>
    </footer>
</body>
</html>

Answer 4

我通过对 css 的这些更改解决了问题：

#content {
    ...
    z-index: 1;
    position: relative;
}

footer {
    ...
    z-index: 0;
}

说明

为 footer 设置 z-index: -1 时，会将其置于 body 的后面，使其无法点击。

我们希望它在 body 之上，所以我们设置它 z-index: 0（或完全删除它）

这意味着我们还需要提高内容，所以我们设置它的z-index: 1

但是 - 因为页脚是固定的，所以它显示在任何没有正确设置位置的东西之上，所以我们需要设置 content 的 position: relative，以保持感知行为。

当 html 和正文隐藏 overflow-x 时，页脚中的链接不可点击（底部固定和内容后面）

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

html

css

z-index

footer

sticky-footer