CSS位置：固定在定位元素内答案

【问题标题】：CSS position:fixed inside a positioned elementCSS位置：固定在定位元素内
【发布时间】：2011-06-25 03:19:24
【问题描述】：

我有一个定位的 div，它的内容可能太长，所以会出现滚动条（overflow:auto 设置）。它用作 ajax 应用程序中的对话框。我想在它的右上角修复一个关闭按钮，这样当用户滚动 div 时它就不会滚动了。

我用position:fixed; right:0; top:0 尝试过，但它把按钮放在页面的右上角而不是在 div 中（在 Firefox 中）。

是否可以仅使用 CSS 来放置此按钮，而无需在每个滚动事件上使用 js 中的 offsetWidth/Height 进行黑客攻击？

ps：div的高度和宽度不是固定值，它取决于内容的大小和浏览器窗口的大小。用户也可以根据需要调整它的大小。

【问题讨论】：

可能值得考虑为按钮使用带有固定位置背景图像的 div。
@NickM 似乎是个好主意，但你会如何点击按钮呢？
@ithil 只要将 div 的高度和宽度设置为与背景图像的高度和宽度相匹配，它就应该是可点击的。至于处理点击，这取决于您使用的是纯 HTML 还是 JS。如果它只是 HTML，您可以将 div 包装在带有href 的a 标记中（或者甚至只使用a 标记而不是div 并将其设置为display: inline-block）。如果是JS，可以点击div收听。我是否正确理解了您的问题？
@NickM 是的，我相信您确实感谢了，但是我猜也使用 JS 将高度和宽度“设置为匹配”？正如 OP 问题“div 的高度和宽度不是固定值”，这就是我想知道的原因
@ithil 我明白了。我错过了那部分。在这种情况下，我认为某些 JS 必须处理 div 的大小是正确的。

标签： html css stylesheet positioning

【解决方案1】：

Position:fixed 给出关于浏览器窗口的绝对位置。所以它当然会去那里。

虽然position:absolute 指的是父元素，所以如果您将<div> 按钮放在容器的div> 内，它应该位于您想要的位置。类似的东西

编辑：感谢@Sotiris，他有一个观点，可以使用 position:fixed 和 margin-left 来实现解决方案。像这样：http://jsfiddle.net/NeK4k/

【讨论】：

如果我使用绝对，用户可以滚动关闭按钮（这是我在尝试修复之前的第一次尝试。）
看起来每个人读错了都想把它留在屏幕上。在这种情况下，您必须使用 javascript 将其与相关 div 正确定位，或者在使用 position: absolute 时使用 javascript 正确滚动它

【解决方案2】：

您可以使用position:fixed;，但不设置left 和top。然后您将使用margin-left 将其推到右侧，以将其放置在您希望的正确位置。

在此处查看演示：http://jsbin.com/icili5

【讨论】：

@Sotiris 你能提供一个参考来解释为什么这应该有效吗？当top 和left 未指定时，为什么浏览器必须以这种方式定位fixed 元素？ stackoverflow.com/questions/8712047/…
我写了最复杂的 JS，直到我偶然发现了这个。不错。
这不是我们想要的行为
我同意这不是答案。它不处理问题中所述的动态宽度容器。
这是我第一次看到这么多人完全误解了这个网站上的问题。

【解决方案3】：

似乎可以使用css转换

"‘transform’属性在元素处建立一个新的局部坐标系",

但是...这不是跨浏览器，似乎只有 Opera 可以正常工作

【讨论】：

现在可以在 Chrome 和 Firefox 中使用。这是一个例子。 codepen.io/anon/pen/ZOqrYo
感谢@PatrickMcElhaney 的示例，这是我正在寻找的解决方案:)

【解决方案4】：

如果您的关闭按钮是文本，这对我来说非常有用：

#close {
  position: fixed;
  width: 70%; /* the width of the parent */
  text-align: right;
}
#close span {
  cursor: pointer;
}

那么你的HTML 可以是：

<div id="close"><span id="x">X</span></div>

【讨论】：

【解决方案5】：

当前选择的解决方案似乎误解了问题。

诀窍是既不使用绝对定位也不使用固定定位。相反，将关闭按钮设置在 div 之外，将其 位置设置为相对，并设置一个左浮动，使其紧邻 div 右侧。接下来，设置负左边距和正 z 索引，使其显示在 div 上方。

这是一个例子：

#close
    {
        position: relative;
        float: left;
        margin-top: 50vh;
        margin-left: -100px;
        z-index: 2;
    }

#dialog
    {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: scroll;
        float: left;
    }

<body> 
    <div id="dialog">
    ****
    </div>

    <div id="close"> </div>
</body>

【讨论】：

很棒的答案，让我找到了更好的解决方案，将元素固定在可滚动的 div 内。

【解决方案6】：

我知道这是一篇旧帖子，但我有同样的问题，但没有找到将元素设置为相对于父 div 固定的答案。 medium.com 上的滚动条是一个很棒的纯 CSS 解决方案，用于设置 position: fixed; 相对于父元素而不是视口（有点 *）。它是通过将父级div 设置为position: relative; 并具有position: absolute; 的按钮包装器来实现的，并且按钮当然是position: fixed;，如下所示：

<div class="wrapper">
  <div class="content">
    Your long content here
  </div>

  <div class="button-wrapper">
    <button class="button">This is your button</button>
  </div>
</div>

<style>
  .wrapper {
    position: relative;
  }

  .button-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
  }

  .button {
    position: fixed;
    top: 0;
    width: 50px;
  }
</style>

working example

*由于固定元素不随页面滚动，因此垂直位置仍将相对于视口，但水平位置相对于该解决方案的父级。

【讨论】：

【解决方案7】：

在要修复的元素的父 div 上尝试 position:sticky。

更多信息在这里：http://html5-demos.appspot.com/static/css/sticky.html。注意：检查浏览器版本兼容性。

【讨论】：

【解决方案8】：

我实现了一个具有固定位置（wiewport）但相对于其父级宽度的元素。

我只需要包装我的固定元素并给父元素一个 100% 的宽度。同时，被包裹的固定元素和父元素在一个宽度随页面变化的div中，包含了网站的内容。使用这种方法，我可以使固定元素始终与内容的距离相同，具体取决于该元素的宽度。在我的例子中，这是一个“到顶部”按钮，始终显示在距底部 15 像素和距内容右侧 15 像素的位置。

https://codepen.io/rafaqf/pen/MNqWKB

<div class="body">
  <div class="content">
    <p>Some content...</p>
    <div class="top-wrapper">
      <a class="top">Top</a>
    </div>
  </div>
</div>

.content {
  width: 600px; /*change this width to play with the top element*/
  background-color: wheat;
  height: 9999px;
  margin: auto;
  padding: 20px;
}
.top-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 9;
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: yellowgreen;
    position: fixed;
    bottom: 20px;
    margin-left: 100px;
    cursor: pointer;
    &:hover {
      opacity: .6;
    }
  }
}

【讨论】：