可滚动弹出 div 中的绝对/固定元素答案

【问题标题】：Absolute/fixed element in scrollable popup div可滚动弹出 div 中的绝对/固定元素
【发布时间】：2015-01-23 19:08:12
【问题描述】：

我有一个按钮，点击后会显示弹出框。弹出窗口需要定位在absolute 或fixed，以免干扰网站内容（如果有人写父位置必须是relative）。

在弹出窗口中我有一个列表，如果不适合框边界，它将是可滚动的。

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

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”按钮position: fixed 坐标，但我希望纯 CSS 灵魂。

这里是jsFiddle

【问题讨论】：

fiddle 和 height auto 我不认为你可以给定高度并尝试或者如果你想给浏览器的高度 100% 你使用 jquery 或 javascript
如果你想拍完整的heightwindowfiddle
非常感谢，添加固定高度就可以了。我没有在我的小提琴中放置固定高度，因为我不知道这会导致问题，而在我的网站上，我使用 jquery 来动态改变容器的高度。 tPlummer 解决方案也有效，但我正在寻找您提出的解决方案，所以如果您可以发布您的解决方案，我将很乐意投票。

标签： jquery html css absolute

【解决方案1】：

heightauto 我不认为你可以给定高度并尝试，或者如果你想给浏览器 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>

【讨论】：

【解决方案2】：

所以，这里发生的事情是 A）您实际上并没有设置与元素的实际位置相关的任何内容，B）您设置的内容不正确，并且 C）您将 close 元素放入可滚动区域……这……是……它滚动的原因。

但别担心！我们可以解决这个问题！ jsfiddle

标记

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

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: url('http://www.catster.com/files/original.jpg');
}
.outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    margin: 5%;
    background: rgba(255,255,255,0.75);
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.relative {
    position: relative;
    width: 100%;
    height: 95%;
    top: 5%;
    left: 0;
}
.inner {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

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

那么这里到底发生了什么？

首先，我们将.close 元素移到可滚动区域之外，这样它就可以在模态框内正确定位。这让我们更接近了一点，但我们仍然需要担心一些令人讨厌的 div 崩溃问题。

嗯...我说讨厌，但我的意思是预期-嗯...我说预期但我的意思是烦人...

只要您在父元素中定位/浮动元素，它就会折叠该父元素。这包括 <html> 和 <body> 元素。所以，我们首先要做的是通过给它们一个定义的大小来取消折叠它们。我们希望它们与窗口大小相同，因此将它们设置为 100% 的高度和宽度就可以了。

现在我们有了一个参考点来定位其他元素。模式设置为fixed，因此它相对于窗口定位。我们将宽度和边距设置为 %，因为这是一种很酷的方法。

然后，我们将模态内容的主容器设置为相对，以便该元素的任何子元素都将根据其位置固定自己。我们通过将孩子设置为绝对值并给他们坐标来告诉孩子去哪里。

设置溢出，设置宽度，给<body>一个好的猫图片背景和BADA-BOOM-BA！一个漂亮的小 CSS 样式模式窗口随时为您服务。

ALLONS-Y！

【讨论】：

非常感谢您的回答，虽然我的问题远没有那么先进，但很有教育意义，基本上我的容器在 css 中没有固定高度是事实。我不知道这会导致问题，否则我会提到我的容器 css.height 正在被 jquery 脚本更改。感谢您的时间和精力，我很感激！
没有问题。这个答案涵盖了固定高度，但以不同的方式。我会警告您，使用 jquery 更改属性并不是处理响应式设计方面的维度的有效方法。祝你好运！