gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 15:13:15 24 4
gpt4 key购买 nike

情况:

给定以下简化的 HTML 示例:

  • 在内容后面放一个页脚,让它粘在底部
  • 当滚动到页面末尾时:页脚应从内容后面展开

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

情况更新:

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

问题:

overflow-x 设置为 htmlbody 与页脚中的链接有什么关系?为什么两个元素都必须设置这个属性? (如果其中一个省略了 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>

最佳答案

正如我所看到的,它是关于边际崩溃的。你的#contentmargin-bottom: 120px它在底部产生空白,并且 overflow: hidden;生成新的格式化上下文,允许 body 与 #content 具有相同的高度堵塞。 z-index: -1footer背后body在这种情况下,您无法点击链接。

但是当你删除 overflow属性(property),body高度将小于 #content因为margin-bottom#footer成为body之外然后链接变为可点击。

另请注意 overflow viewport 上的属性不会剪辑父元素之外的固定元素,这就是为什么 #footer保持可见和活跃。

关于html - 当 html 和正文隐藏 overflow-x 时,页脚中的链接不可点击(底部固定和内容后面),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36792193/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com