5
状況：リンク
次単純化されたHTMLの例を考えると：
- はフッターを入れページの最後までスクロールしたときコンテンツの後ろに、それボトムスティッキー
- ますフッタはコンテンツ 後ろから解明しなければなりません0
は、私がこれを行うことができたが、私が持っているときhtmlとbodyの両方が、それはhiddenにフッターにこれらのリンクはクリックできませんoverflow-xプロパティの設定しました。状況に
更新：
は、私はそれが2に#contentためのzインデックスを設定するために、1〜footerためのリンクがクリック可能にすることが可能だということを知っているが、それは違うからmultizoom.jsと干渉するページの一部であり、私の興味ではありません。
質問：
フッター内にあるリンクの両方htmlとbodyにoverflow-xの設定をどうしますか？そして、なぜの両方とも要素がこのプロパティを設定する必要がありますか？ （overflow-xのうちの1つだけを省略するとリンクがクリック可能になります）
実際に私にとっては、古くなったスタイリングの試行で残ったもので、すでに削除されているため、元のプロジェクトに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; 'に問題があります。 – Huelfe
私はそれがz-indexs 2対1で動作することを知っていますが（質問を更新します）、マルチズームスクリプト（これはまったく別の問題です）を妨害します。 – xmoex
@xmoexだから '＃content'はZ-インデックス？それとも、 'z-index：-1;'を持つ 'footer'ですか？ – Green