Html 动态环境下的元件定位固定

我正在使用引导，我想让红色背景的右上角始终坐在可见部分蓝色部分的右上角，无论窗口大小如何调整，因为它是响应的

红色应该是位置固定的，因为它不应该通过滚动移动，但应该始终位于可见蓝色背景部分的右上侧

如图所示，它应该是这样的： 如果我滚动（我现在用windows paint完成）

请检查或查看以下代码：

.row{
背景#f8f9fa；
边缘顶部：20px；
}
上校{
边框：实心1px#6c757d；
填充：10px；
}
.左{
背景颜色：蓝色；
宽度：100%；
高度：4000px；
}
.对{
背景色：红色；
宽度：100%；
位置：固定；
右：18%；
}

左边
正确的

如果要将元素设置在右侧顶部，并且它应该在另一个元素之外而不滚动，则可以使用位置：绝对属性 尝试以下解决方案：

.right{
  background-color: red;
  width: '100%';
  position: absolute;
  right: 15%;
  top: 30px;
}

---

在本例中，您正在查找

位置：sticky

。您需要做几件事来实现这一目标：

在元素的父元素上设置

位置：相对

（本例中为

行

）

在粘性元素上设置一个

top

值。这是必需的，因此当元素切换到“粘滞”时，它知道将其放置在何处

我在

.right

元素中添加了另一个类，因为Bootstrap的

col

类更具体。向该元素添加class

.sticky

，确保应用了position属性

.row{
背景#f8f9fa；
边缘顶部：20px；
调整项目：灵活启动；
位置：相对位置；
}
.左{
背景颜色：蓝色；
宽度：100%；
高度：4000px；
}
.对，粘乎乎的{
背景色：红色；
宽度：100%；
位置：粘性；
右：18%；
排名：0；
}

左边
正确的

这是否回答了您的问题？不，那是不同的。在我的例子中，红色层需要固定的位置对于可见区域是动态的。它很容易总是在左侧或顶部，但不在右侧。至少我还是不知道该怎么做。你得到的答案不是你想要的，是因为不清楚你到底想做什么。你的js提琴看起来和你描述的一样，但显然不是这样，所以你能解释一下它做了什么是错的吗？或者如果你有一个例子，如果我们能理解你的意思，那就更容易理解了。嗨，你改变了我的代码，实际上这不是我想要的。在你的复习中，结果不是我想要的。当你滚动页面时，红色元素消失了，我希望无论窗口大小和蓝色大小（取决于窗口大小）右上角的位置如何都能被修复。我实际上没有更改代码，只是将代码包装在代码段标记中。出现问题的部分原因是因为您在没有列的布局中使用列—您正在将最后一列移出。你需要列布局吗？谢谢，但不需要，它不是那样工作的。它仍然可以从blueSorry的可见右上角开始，忘记添加，请添加位置：relative for.row class这并不能解决问题。你可以在我提供的链接中自己检查，谢谢，但是仍然有一个问题。如果缩小浏览器宽度，红色将消失（我希望红色部分不仅在垂直滚动时可见，而且在缩小浏览器宽度时也可见。Thanks@Sami我不认为会发生这种情况。请全屏运行我的代码片段，然后您可以对其进行测试。您的站点上是否有其他代码隐藏了

。对吗？@disninfor否基本上我在此处调整浏览器的大小，并在收缩t时查看他看不到红色。是的，因为红色元素正在下降。你需要列吗？为什么不从蓝色列中的红色元素开始？