当前位置：文江博客话题详情

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

发布于 2024-10-16 20:56:37 字数 352 浏览 7 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧话新听 2024-10-23 20:56:37

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

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

回复收藏 0 原文

流年已逝 2024-10-23 20:56:37

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

诀窍是既不要使用绝对定位也不要使用固定定位。相反，将关闭按钮放在 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>

The current selected solution appears to have misunderstood the problem.

The trick is to neither use absolute nor fixed positioning. Instead, have the close button outside of the div with its position set to relative and a left float so that it is immediately right of the div. Next, set a negative left margin and a positive z index so that it appears above the div.

Here's an example:

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

回复收藏 0 原文

秉烛思 2024-10-23 20:56:37

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

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

工作示例

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

I know this is an old post but I had the same question but didn't find an answer that set the element fixed relative to a parent div. The scroll bar on medium.com is a great pure CSS solution for setting something position: fixed; relative to a parent element instead of the viewport (kinda*). It is achieved by setting the parent div to position: relative; and having a button wrapper with position: absolute; and the button of course is position: fixed; as follows:

<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

*Since fixed elements don't scroll with the page the vertical position will still be relative to the viewport but the horizontal position is relative to the parent with this solution.

回复收藏 0 原文

倚栏听风 2024-10-23 20:56:37

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

虽然 position:absolute 引用父元素，所以如果您将

按钮放置在容器的 div> 内，它应该位于您想要的位置。
像编辑这样的东西

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

回复收藏 0 原文

清晨说晚安 2024-10-23 20:56:37

似乎，CSS变换可以使用

“'transform'属性在元素上建立一个新的本地坐标系”，

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

回复收藏 0 原文

漫雪独思 2024-10-23 20:56:37

尝试在要固定的元素的父 div 上使用 position:sticky 。

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

回复收藏 0 原文

天冷不及心凉 2024-10-23 20:56:37

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

I achieved to have an element with a fixed position (wiewport) but relative to the width of its parent.

I just had to wrap my fixed element and give the parent a width 100%. At the same time, the wrapped fixed element and the parent are in a div which width changes depending on the page, containing the content of the website. With this approach I can have the fixed element always at the same distance of the content, depending on the width of this one. In my case this was a 'to top' button, always showing at 15px from the bottom and 15px right from the content.

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

回复收藏 0 原文

爱殇璃 2024-10-23 20:56:37

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

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

If your close button is going to be text, this works very well for me:

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

Then your HTML can just be:

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

回复收藏 0 原文

摘星┃星的人 2024-10-23 20:56:37

位置固定但相对于parent-div

#parent-div {
  position: *either static or relative, doesn't matter*
  width: 1024px;  // for example
  height: 300vh;  // for example
}

#sticky-div {  // should be div
  position: sticky;
  bottom: 40px;
  width: 30px;  // your-element's width or larger
  height: 30px;  // your-element's height or larger
  margin-top: -40px;  // to compensate "bottom"
  margin-left: auto;
  margin-right: 20px;  // substitution for "right" property
  z-index: 10;
}

#your-element {
  width: 30px;
  height: 30px;
  background-color: red;
}

<div id="parent-div">
  <div id="sticky-div">
    <whatever id="your-element" />
  </div>
</div>

position fixed but relative to parent-div

#parent-div {
  position: *either static or relative, doesn't matter*
  width: 1024px;  // for example
  height: 300vh;  // for example
}

#sticky-div {  // should be div
  position: sticky;
  bottom: 40px;
  width: 30px;  // your-element's width or larger
  height: 30px;  // your-element's height or larger
  margin-top: -40px;  // to compensate "bottom"
  margin-left: auto;
  margin-right: 20px;  // substitution for "right" property
  z-index: 10;
}

#your-element {
  width: 30px;
  height: 30px;
  background-color: red;
}

<div id="parent-div">
  <div id="sticky-div">
    <whatever id="your-element" />
  </div>
</div>

回复收藏 0 原文

想你只要分分秒秒 2024-10-23 20:56:37

不确定它是否与其他解决方案不同，但这就是我理解没有任何顶部、左侧等的固定位置的方式：

您使用包装器将元素放置在您想要的任何位置，然后在元素本身上，您只需使用“固定” “ 位置。这将“冻结”元素。

仅当您确保主体上没有全局滚动条时，这才有效。

所以这应该适用于问题的用例。

<body style="height :80vh; display:grid;place-items:center">
  <div style="height:150px; width:150px;background:grey;overflow-y:auto">
    <div style="height:2000px;position:relative">
      <div style="position:absolute;top:0;right:25px;">
        <button style="position:fixed">
               x
        </button>
      </div>
      <div>stuf</div>
      <div>stuf</div>
      <div>stuf</div>
      <div>stuf</div>
      <div>stuf</div>
    </div>
  </div>
</body>

Not sure if it's different from the other solutions, but this is how I understand the fixed position without any top, left, etc:

You place your element wherever you want using a wrapper, and then on the element itself, you just use "fixed" position. This will "freeze" the element.

This is only working if you make sure you don't have a global scrollbar on the body.

So this should work for the use case of the question.

<body style="height :80vh; display:grid;place-items:center">
  <div style="height:150px; width:150px;background:grey;overflow-y:auto">
    <div style="height:2000px;position:relative">
      <div style="position:absolute;top:0;right:25px;">
        <button style="position:fixed">
               x
        </button>
      </div>
      <div>stuf</div>
      <div>stuf</div>
      <div>stuf</div>
      <div>stuf</div>
      <div>stuf</div>
    </div>
  </div>
</body>

回复收藏 0 原文

~没有更多了~