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

Question

我有一个height:x; width:y; overflow:auto;显示文章内容的 div。自然，随着内容超出 div 的限制，会出现一个滚动条让我阅读所有内容。

div 包含一个“关闭”链接position: absolute; top: 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 使其位于内部 div 上方。

一个例子

代码（基于您的html）：

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

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

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

Answer 2

如果我理解正确，你已经知道你可以做到这一点，但我认为把divoverflow: auto;放在.innerdiv 上是唯一的方法：

.box1 {
    background: yellow;
    width: 200px;
    height: 200px;
    position: relative;
}
.inner {
    overflow: auto;
    height: 100%;
}
a[data-type="close"] {
    position: absolute;
    top: 0;
    right: -10px;
}

http://jsfiddle.net/36U4R/

Answer 3

在关闭标签时应用位置：

<a data-type="close" style="position:fixed;">X</a>

希望这有帮助