html 固定一条直线的位置,html-CSS位置：固定在定位元素内

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

我有一个定位的div，其内容可能太长，因此出现滚动条(已设置overflow:auto)。 它充当ajax应用程序中的对话框。 我想在其右上角修复一个关闭按钮，以便当用户滚动div时不会滚动离开。

我尝试使用position:fixed; right:0; top:0进行尝试，但是它将按钮放置在页面的右上角而不是div中(在Firefox中)。

是否可以仅使用CSS进行此按钮放置，而不会在每次滚动事件中都破坏js中的offsetWidth / Height？

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

7个解决方案

82 votes

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

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

Sotiris answered 2019-09-27T12:37:25Z

14 votes

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

诀窍是既不使用绝对定位也不使用固定定位。 而是将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;

}

****

Joseph answered 2019-09-27T12:38:01Z

5 votes

position:absolute给出了有关“浏览器”窗口的绝对位置。 所以它当然会去那里。

尽管position:absolute引用了父元素，所以如果将

按钮放置在容器的

内部，则它应该位于您想要的位置。就像是

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

Damien Pirsy answered 2019-09-27T12:38:45Z

4 votes

我知道这是一篇老文章，但我有相同的问题，但是没有找到一个将元素相对于父级div固定的答案。medium.com上的滚动条是一个很棒的纯CSS解决方案，用于相对于position: fixed;设置某些内容 父元素而不是视口(kinda *)。 这是通过将父级div设置为position: relative;并具有position: absolute;的按钮包装而实现的，按钮当然是position: fixed;，如下所示：

Your long content here

This is your button

.wrapper {

position: relative;

}

.button-wrapper {

position: absolute;

right: 0;

top: 0;

width: 50px;

}

.button {

position: fixed;

top: 0;

width: 50px;

}

工作实例

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

Lifehack answered 2019-09-27T12:39:27Z

2 votes

似乎可以使用CSS转换

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

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

4esn0k answered 2019-09-27T12:40:12Z

1 votes

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

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

Lohit Bisen answered 2019-09-27T12:40:49Z

0 votes

如果您的关闭按钮将是文本，则对我来说效果很好：

#close {

position: fixed;

width: 70%; /* the width of the parent */

text-align: right;

}

#close span {

cursor: pointer;

}

那么您的HTML可以是：

X

thatmiddleway answered 2019-09-27T12:41:26Z