jquery - 可滚动弹出 div 中的绝对/固定元素

Question

我有一个按钮，单击它后会显示弹出框。弹出窗口需要定位绝对或固定，不要干扰网站的内容(以防有人写父级的位置必须是相对)。

在弹出窗口中，我有一个列表，如果不适合框边界，则该列表可以滚动。

在右上角，我希望有一个“关闭”按钮，无论滚动如何，该按钮都将保持粘在框的一 Angular 。不幸的是它没有，它与内容一起滚动。

HTML:

<div class="outer">
    <div class="relative">
        <div class="close">X</div>
        <div class="inner">
            <li>test</li>
            (...)
            <li>test</li>
        </div>
    </div>
</div>

CSS:

.outer {
    position: absolute;
    width: 98%;
}

.relative {
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
}

如您所见，我试图欺骗它并使用 position:relative 添加额外的 div 以使“X”按钮按预期工作，但这并没有达到目的。

有什么想法可以让它发挥作用吗？我知道我可以使用 jQuery 并根据弹出窗口偏移量给出“X”按钮位置:固定坐标，但我希望获得纯 CSS 灵魂。

这是jsFiddle

Answer 1

with height auto 我不认为这是可能的，相反你可以给出固定的高度并尝试，或者如果你想给浏览器的高度100%，你可以使用jquery或JavaScript

演示 - http://jsfiddle.net/84cyupb0/1/

.outer {
  position: absolute;
  width: 98%;
  border: 1px solid red;
}
.relative {
  position: relative;
}
.inner {
  height: 200px;
  overflow-y: scroll;
}
.close {
  position: absolute;
  top: 10px;
  right: 10px;
}

<div class="outer">
  <div class="relative">
    <div class="close">X</div>
    <div class="inner">
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </div>
  </div>
</div>