xmo*_*oex 6 html css z-index footer sticky-footer
情况:
给出以下简化的HTML示例:
我能够做到这一点,但是当我拥有html并且body都将它的overflow-x属性设置hidden为页脚中的那些链接时是不可点击的.
更新情况:
我知道可以将z-indices设置为#content2和footer1来使链接可以点击,但这会干扰来自页面不同部分的multizoom.js并且不是我感兴趣的.
题:
什么设置overflow-x这两个html和body在脚注中的链接呢？为什么两个元素都必须设置此属性？(如果只是其中一个省略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会margin-bottom: 120px在底部产生空白，并overflow: hidden;产生新的格式化上下文，允许正文与块具有相同的高度#content。在这种情况下，您将无法单击链接z-index: -1。footerbody
但是当你删除overflow属性时，body将具有比#content外部更小的高度margin-bottom，并且在该链接变得可点击之后。#footerbody
另请注意overflow视口上的属性不会剪辑超出父级的固定元素，这就是#footer保持可见和活动状态的原因。
| 归档时间： |
|
| 查看次数： |
792 次 |
| 最近记录： |