Question

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

div包含一个'close'链接position: absolute; top: 20px; right: 20px;，它显示一个'x'来关闭div（使用jQuery和animations）。问题是，当我滚动文章时，'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。

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;
}

Answer 2

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

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

希望这个帮助

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

3 个答案: