Button Behind Div Cant Click And Need Too!

Hello guys,

Here is the link to the site need some help with…

http://amethystmine.com/2012/know-your-amethyst/

Now everything works great but on a smaller screen when you the mascot covers up some of the history button, is there a way I can still make that button clickable without scrolling down some.

Thanks,

Mike

Position: fixed takes elements out of the flow so that they don’t care where other elements are. You are probably better off using a sticky footer for this, rather than position: fixed, which isn’t as reliable:

Or, better still, remove the fixed positioning on the footer etc. and just place them below the content in the natural flow of the document. You can make the fotter color always go to the bottom of the screen even on short pages by placing the footer color on the <body> element and setting the content background to white.

Hi Mike,

Unfortunately, no you can’t have two clickable elements both above and below at the same time. One will always have to be on top. You could make the tabs go on top at all times by setting the z-index of Content (position:relative will also need to be added) higher than #steve but then that means your footer will be under the content. If you raise the z-index of the footer the the bottom of #steve will get cut off.

You can’t have #steve on top of the footer and then under the content to allow the tabs to be clicked.

It’s just impossible for that scenario to work. You just have to keep #steve clear of the nav or any other clickable content