Question

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

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

在右上方的conrer中，我希望有一个“关闭”按钮，无论滚动如何，它都会一直粘在盒子的角落。不幸的是，它不会与内容一起滚动。

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

正如你所看到的那样，我试图欺骗它并添加额外的div position:relative以使“X”按钮按预期工作，但这并不能解决问题。

任何想法我怎样才能让它发挥作用？我知道我可以使用jQuery并根据弹出偏移给出'X'按钮position: fixed坐标，但我希望纯粹的CSS灵魂。

这是jsFiddle

Answer 1

所以，这里发生的是A）你实际上没有设置任何与元素实际位置相关的东西，B）你设置的是不正确的，C）你＆＃39 ;将close元素放在可滚动区域内......这就是...为什么滚动。

但不要担心！我们可以修复它！ jsfiddle

<强> MARKUP

<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，因此它相对于窗口定位。我们将宽度和边距设置为％，因为这是很酷的方式。

然后，我们将模态内容的主容器设置为relative，以便该元素的任何子元素根据它的位置自行修复。我们告诉孩子去哪里，把他们设置为绝对并给他们坐标。

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

<强> ALLONS-Y！

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: