Home/ Questions/Q 769937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T18:25:04+00:00

I have a block element that is positioned absolutely and some other elements on

  • 0

I have a block element that is positioned absolutely and some other elements on page that are positioned fixed. The effect is the block on top floats over the page which works well.

The links in the elements at the bottom underneath are not clickable. They shouldn’t be when the content of the div is over them, but when the “marginal” areas which are transparent are over the links they are visible, but clicks only register to the covering div.

The problem only happens when the padding covers the div. But if I just rely on the margin the bottom margin is ignored by browser so the scroll doesn’t go high enough up. To solve this I resort to padding at the bottom. This is the problem.

Is there a clean way around this? I realize I could have the underneath elements doubled and place on top, but opacity set to 0. That is an undesirable solution however.

Sample of the problem:

<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <style>
      #top, #bottom {
        position: fixed;
        border: 1 px solid #333;
        background-color: #eee;
        left: 100px;
        padding: 8px;
      }
      #top {
        top: 0;
        z-index: 1;
      }
      #bottom {
        bottom: 0;
        z-index: 2;
      }
      #contentWrapper {
        position: absolute;
        margin: 100px 0 0 0;
        /* Padding is used to make sure the scroll goes up further on the page */
        padding: 0 0 100px 0;
        width: 600px;
        z-index: 3;
      }

      #content {
        border: 1 px solid #333;
        background-color: #eee;
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <div id='top'><a href="#">Top link</a></div>
    <div id='bottom'><a href="#">Bottom link</a></div>
    <div id='contentWrapper'>
      <div id='content'>Some content</div>
    </div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is your padding. The link at the top is still clickable because the margin on your content displaces it, meaning that your element is no longer covers your link when the user has scrolled to the correct place. With the padding-bottom the element is extended and the element covers the links at the bottom. The solution is therefore found when considering the problem: how do we extend where the page can scroll to without using #contentWrapper?

    Here’s one solution which works regardless of the height of your content:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style>
    #top, #bottom {
        position: fixed;
        background-color: #00F;
        left: 100px;
        padding: 8px;
    }
    #top {
        top: 0;
    }
    #bottom {
        bottom: 0;
    }
    #contentWrapper {
        position: absolute;
        margin: 100px 0 0 0;
        width: 600px;
        z-index: 10000;
        overflow: visible;
    }
    #heightFix {
        position: absolute;
        bottom: -100px;
        height: 0;
        overflow: hidden;
        font-size: 0;
    }

    #content {
        background-color: #F00;
        height: 1000px;
    }
    </style>
  </head>
  <body>
    <div id="top"><a href="#">Top link</a></div>
    <div id="bottom"><a href="#">Bottom link</a></div>
    <div id="contentWrapper">
      <div id="heightFix"></div>
      <div id="content">Some content</div>
    </div>
  </body>
</html>
    • 0