Login/Register
Links in footer unclickable (bottom-fixed and behind content) when overflow-x is hidden for html and body
Asked Answered
Solved htmlcssz-indexfootersticky-footer
C

4

6

Situation:

Given the following simplified HTML example:

  • put a footer behind content, make it bottom-sticky
  • when scrolling to the end of page: footer shall unravel from behind content

I was able to do this but when I have html and body both set it's overflow-x property to hidden those links in the footer are not clickable.

Update to situation:

I know that it's possible to set z-indices for #content to 2 and for footer to 1 to make the links clickable, but that interferes with a multizoom.js from a different part of the page and is not of my interest.

Question:

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?

Example:

/* 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>
Colorable answered 22/4, 2016 at 11:7 Comment(4)
When you set your #content relative with z-index: 2; and footer z-index: 1;, everything works. Seems like body has a problem with z-index: -1;. – Granduncle
I know that it works with z-indexs 2 vs 1 (and I shall update the question) but that interferes with a multizoom-script (which would be a totally different problem) – Colorable
@Colorable So #content shouldn't have z-index? Or is it footer that should have z-index: -1;? – Glove
@Green #content shouldn't have z-index. Btw: It's not about solving the problem in a different way, I'm interested why the problem was solved as it was (or what role overflow-x played) – Colorable
B
3

As I can see its about margin collapsing. Your #content has margin-bottom: 120px it produces blank space at the bottom, and overflow: hidden; produces new formatting context which allows body to be same height as #content block. z-index: -1 pushes footer behind body in this case and you can't click link.

But when you remove overflow property, body will have smaller height than #content because of margin-bottom and #footer became outside of body and after that links become clickable.

Also note that overflow property on viewport does not clip fixed elements which are out of parent, that's why #footer remains visible and active.

Benediction answered 22/4, 2016 at 11:57 Comment(0)
G
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?

As you said it will work when you remove style from html.

Why do people style html tag?

For now I have encountered at least three cases in which people style html.

  1. When they want to set global properties values for the ones that inherits values from their ancestors.

  2. When they want to force browser to display scrollbar.

    html, body {
    min-height: 100.1%;
}

  3. When they want to make table out of the page.

We can style html because it is DOM element which takes normal attributes (W3 on html), but I, and as far as I know a lot of other people, strongly suggest to avoid using it, unless you want to do some cool tricks with it. Styling html may lead to unwanted behaviour due to the way browsers work. Keep in mind that body is not the only child of html. There is also head. When you want to style the visible part of your page you have got body for it (why would you style invisible part in first place?).

Glove answered 22/4, 2016 at 11:54 Comment(0)
D
1

The problem seems to be that the footer has a negative z-index and the body doesn't have any (so defaults to 0?). Putting overflow-x: hidden into the body's css statement extends the body over the footer (see t1m0n's answer for the reason why).

Adding a lower z-index to the body and making it relatively positioned fixes the problem on Chrome, IE, Firefox and 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>
Devotee answered 22/4, 2016 at 12:0 Comment(0)
J
-1

I fixed the problem with these changes to the css:

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

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

Explanation

When setting z-index: -1 for the footer, it places it BEHIND the body, making it unclickable.

We want it ABOVE the body, so we set its z-index: 0 (or remove it altogether)

This means we also need to raise the content, so we set its z-index: 1

BUT - because the footer is fixed, it is displayed ABOVE anything that doesn't have a position properly set, so we need to set the content's position: relative, to keep the perceived behavior.

Jemy answered 24/4, 2016 at 13:11 Comment(2)
The question was about the role of overflow-x: hidden set to html and body. A solution without this property set works perfectly fine even with z-index of footer set to -1 – Colorable
Well, I didn't change anything else so I guess the overflow settings are still in place – Jemy

© 2022 - 2024 — McMap. All rights reserved.