All geek questions in one place

Links in the footer are unclickable (fixed at the bottom and behind the content) when overflow-x is hidden for html and body

Situation:

Given the following simplified HTML example:

  • place the footer over the content, make it sticky.
  • when scrolling to the bottom of the page: footer should disappear due to content

I was able to do this, but when I have html and body , both set the overflow-x property to hidden , those links in the footer cannot be clickable.

Update to situation:

I know that you can set z-indexes for #content to 2 and for footer to 1 to make the links clickable, but this prevents the use of multizoom.js from another part of the page and is not of my interest.

Question:

What did overflow-x for both html and body for links in the footer? And why do both elements set this property? (If only one of them omits overflow-x , links can be clicked)

Actually, it’s no longer a problem for me not to install overflow-x in the original project, because it has stayed away from the outdated styling attempt and has already been deleted. But I'm curious why such a strange behavior?

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>
+5
source share
4 answers

How can I see it crumble. Your #content has margin-bottom: 120px , it creates an empty space at the bottom, and overflow: hidden; creates a new formatting format that allows the body to be the same height as #content . z-index: -1 clicks the footer behind the body in this case, and you cannot click the link.

But when you remove the overflow property, the body will have a lower height than #content , because margin-bottom and #footer are outside the body , and after that the links become available.

Also note that the overflow property on the viewport does not fix fixed elements that are outside the parent, so #footer remains visible and active.

+1
source

What set overflow-x for html and body for links in the footer? And why do both elements set this property? (If only one of them skips overflow-x, links can be interactive)

Actually, it’s not a problem for me to no longer install overflow-x in the original project, because it has stayed away from the outdated styling attempt and has already been deleted. But I'm curious why such a strange behavior?

As you said, it will work if you remove the style from html .

Why do people style the html tag?

Currently, I have come across at least three cases in which people style html .

  • When they want to set global property values ​​for those that inherit values ​​from their ancestors.

  • When they want to make the browser display the scroll bar.

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

  • When they want to make a table on the page.

We can style html because it is a DOM element that accepts normal attributes ( W3 on html ), but I, as far as I know many other people, highly recommend avoiding their use if you do not want to do some interesting things with them tricks. The html style can lead to unwanted behavior due to how browsers work. Keep in mind that body not the only child element of html . There is also a head . If you want to style the visible part of your page, you have a body for it (why don't you draw the invisible part in the first place?).

+1
source

The problem is that the footer has a negative z-index and the body does not (so is 0 by default). Putting overflow-x: hidden in the body the css expression extends the body over the footer (see t1m0n's answer for a reason).

Adding the z subscript to the body and positioning it fixes the problem in 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>
+1
source

I fixed the problem with these changes in css:

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

Explanation

When setting z-index: -1 for the footer it puts it in the body position, making it invisible.

We want it to be higher than the body , so we set it to z-index: 0 (or delete it altogether)

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

BUT - because the footer is fixed, it displays ABOVE something that does not have the correct position, so we need to set the content position: relative to preserve the perceived behavior.

-1
source

Source: https://habr.com/ru/post/1247700/

More articles:


All Articles