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

【问题标题】：Links in footer unclickable (bottom-fixed and behind content) when overflow-x is hidden for html and body当对 html 和 body 隐藏 overflow-x 时，页脚中的链接不可点击（底部固定和内容后面）
【发布时间】：2016-08-15 23:43:12
【问题描述】：

情况：

给出以下简化的 HTML 示例：

将页脚放在内容的后面，使其底部粘性
滚动到页面末尾时：页脚应从内容后面展开

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

情况更新：

我知道可以将 #content 的 z-indices 设置为 2 并将 footer 的 z-indices 设置为 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>

【问题讨论】：

当您将#content 相对设置为z-index: 2; 和页脚z-index: 1; 时，一切正常。似乎 body 对 z-index: -1; 有问题。
我知道它适用于 z-indexs 2 vs 1（我将更新问题），但这会干扰多缩放脚本（这将是一个完全不同的问题）
@xmoex 所以#content 不应该有z-index？还是应该有z-index: -1; 的footer？
@Green #content 不应该有 z-index。顺便说一句：这不是以不同的方式解决问题，我很感兴趣为什么问题会按原样解决（或者溢出-x 扮演了什么角色）

标签： html css z-index footer sticky-footer

【解决方案1】：

将overflow-x 设置为html 和body 与页脚中的链接有什么关系？为什么两个元素都必须设置这个属性？（如果其中一个省略了overflow-x，则链接是可点击的）

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

正如你所说的it will work when you remove style from html。

人们为什么要设置html 标签的样式？

目前我遇到过至少三个人风格html的案例。

当他们想要设置全局属性值时从他们的祖先那里继承价值观。
当他们想要强制浏览器显示滚动条时。
```
html, body {
    min-height: 100.1%;
}
```
当他们想在页面之外制作表格时。

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

【讨论】：

【解决方案2】：

我可以看到它关于边距折叠。你的#content 有margin-bottom: 120px，它在底部产生空白，overflow: hidden; 产生新的格式化上下文，允许正文与#content 块的高度相同。在这种情况下，z-index: -1 将 footer 推到 body 后面，您无法点击链接。

但是当您删除 overflow 属性时，body 的高度将小于 #content，因为 margin-bottom 和 #footer 超出了 body 并且之后链接变为可点击。

另请注意，视口上的 overflow 属性不会剪切超出父级的固定元素，这就是 #footer 保持可见和活动状态的原因。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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，以保持感知行为。

【讨论】：

问题是关于overflow-x的作用：隐藏设置为html和body。即使页脚的 z-index 设置为 -1，没有此属性集的解决方案也能正常工作
好吧，我没有更改任何其他内容，所以我猜overflow 设置仍然存在