当页面滚动时，如何强制div元素保持在原处

Question

我创建了一个

元素，并将其放置在我的网站最右边。唯一的问题是它在网站的顶部，所以如果我向下滚动页面，它仍然停留在那里。

当页面被滚动时，如何强制它保持在页面的同一部分？

这是我自己已经想出来的：

<div style="width: 200px; background-color: #999; z-index: 10; position: absolute; right: 0; top: 0; height: 83px;">
</div>

- soniccool

---

可能是重复的问题：当我滚动页面时，如何使<div>上下移动？ - Lucas

CSS中有一个新的功能，可以自动将某个元素设置为固定位置而无需使用JavaScript：position: sticky。https://caniuse.com/#feat=css-sticky - Randolpho

刚试了一下sticky，截至2020年2月11日，在Chrome中似乎还没有生效。 - eidylon

Answer 1

将 position:absolute 改为 position:fixed;。

示例可以在这个 jsFiddle中找到。

- Anton D

---

position: fixed 的问题在于它脱离了文档流，会导致元素重叠。 - Csibi Norbert

Answer 2

使用 position: fixed 替代 position: absolute。

可参见这里。

- user2769260

Answer 3

你可以将 position:absolute; 替换为 position:fixed; 以实现此目的。

- SOULAT TOQEER

Answer 4

你的代码有问题。

position: absolute会使元素显示在页面中其他元素之上，但该位置不随滚动相对而变化。

可以通过 position: fixed 解决此问题。这个属性将使元素的位置固定并与滚动相对。

或者

你可以在这里查看。

- Debu Shinobi

---

你的答案与之前的差不多。 - vals

Answer 5

1. 您可以使用position: absolute，并使用以下类似的CSS参数调整对齐方式。

.dvfixed{
  position: absolute;
  left: 100px;
  right: 10px;
  bottom: 5px;
  top: 5px;
}

或者

2. 你可以像下面这样使用float。

.dvfloat{
  float:right;
}

- Phani Bitla

Answer 6

在我的情况下，我希望蓝线保持固定，我使用了sticky，并将其设置为right 0和left 0。

输入图像描述

- wassim nassour