javascript - 如何修复另一个包含滚动条的元素内的 div？

Question

我有一个 height:x 的 div；宽度:y； overflow:auto; 显示一篇文章的内容。自然地，当内容超出 div 的限制时，会出现一个滚动条让我阅读所有内容。

div 包含一个“关闭”链接 position: absolute;顶部:20px； right: 20px; 显示“x”以关闭 div(使用 jQuery 和动画)。问题是，当我滚动浏览文章时，“x”也随之滚动。我希望“x”保持在同一位置，而不是随内容移动。

我已尝试将位置值更改为“固定”，但这会将其固定到页面主体，而不是 div。如果不将 div 定位在主要内容之外，我该如何克服这个问题？

<div class="box1">
  <a data-type="close">X</a>
  <div class="inner">
      //content//
  </div>
</div>

Answer 1

使包装 div 与内部滚动 div 大小相同并添加 position:relative; 然后将关闭按钮绝对定位在包装 div 内并增加 z-index 使其位于内部滚动之上分区

An example

代码(基于您的 html):

.box1 {
    position:relative;
    height:100px;
    width:200px;
}

.inner {
    width:200px;
    height:100px;
    background:#f2f2f2;
    overflow:auto;
}

a {
    top:0;
    right:0;
    position:absolute;
}