代码之家 › 专栏 › 技术社区 › Adam

在DIV是“透明”的区域中,是否可以在DIV(链接)后面单击元素?

css html javascript

Adam · 技术社区 · 16 年前

我有一个绝对定位的块元素和页面上其他一些固定定位的元素。效果是顶部的块在页面上浮动,效果很好。

底部元素中的链接不可单击。它们不应该是当DIV的内容在它们上面时,但是当透明的“边缘”区域在链接上时,它们是可见的,但单击只注册到覆盖的DIV。

这个问题只发生在填充覆盖了分区的时候,但是如果我仅仅依赖于边界,浏览器就会忽略底部的边界,这样滚动就不会足够高了。为了解决这个问题,我在底部使用填充物。这就是问题所在。

这附近有干净的路吗?我意识到我可以让下面的元素加倍并放在上面,但是不透明度设置为0。然而,这是一个不可取的解决方案。

问题示例:

<!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>

3 回复 | 直到 16 年前

icio 16 年前

问题是你的填充物。顶部的链接仍然可以点击,因为 margin 在内容上替换它,这意味着当用户滚动到正确的位置时,元素不再覆盖链接。与 padding-bottom 扩展元素,元素覆盖底部的链接。因此,在考虑问题时找到了解决方案: 如何扩展页面的滚动位置而不使用 #contentWrapper ?

这里有一个解决方案 无论内容的高度如何,都能正常工作 :

<!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>

Pointy 16 年前

据我所知,你唯一能做的就是处理封面上的事件 <div> ,并在事件中使用鼠标坐标来确定要触发哪个链接。我甚至不愿意考虑这么做,但这是可能的。早在我开始尝试之前,我就努力想出一个更好的方法来定位顶层,这样就不需要填充了。

Matthew James Taylor 16 年前

试着使覆盖区域尽可能小。

或者更具体地说,如果“透明”部分的形状是“方形”,那么您可能会从多个较小的分区创建浮动区域。这将使“透明”区域实际上是“无分区”的,因此链接可以在这些区域中单击。

我认为不可能让链接以任何其他方式通过一个DIV点击?