Question

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

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

是否可以使用CSS进行此按钮放置而不会在每次滚动事件中使用js中的offsetWidth / Height进行黑客攻击？

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

Answer 1

您可以使用position:fixed;，但不能设置left和top。然后，您将使用margin-left将其向右推，将其置于您想要的正确位置。

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

Answer 2

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

诀窍是既不使用绝对定位也不使用固定定位。相反，在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>

Answer 3

Position:fixed给出了关于BROWSER窗口的绝对位置。所以当然可以去那里。

虽然position:absolute引用了父元素，但如果您将<div>按钮放在容器的＆lt; div>内，它应该放在您想要的位置。像

这样的东西编辑：感谢@Sotiris，他有一个观点，可以使用一个位置来实现解决方案：固定和左边距。像这样：http://jsfiddle.net/NeK4k/

Answer 4

我知道这是一个旧帖子，但我有同样的问题，但没有找到相对于父div设置元素固定的答案。 medium.com上的滚动条是一个很棒的纯CSS解决方案，用于相对于父元素而不是视口（kinda *）设置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

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

Answer 5

似乎可以使用css转换

“'transform'属性在元素”

处建立一个新的局部坐标系

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

Answer 6

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

此处有更多信息：http://html5-demos.appspot.com/static/css/sticky.html。警告：检查浏览器版本兼容性。

Answer 7

我实现了一个具有固定位置（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;
    }
  }
}

Answer 8

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

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

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

8 个答案: