Html 使div固定在页面上以角度滚动

我现在有一个这样的屏幕布局

我必须以下面的方式渲染组件3中的组件2

由于某些限制，我不能将角度分量3放在角度分量2内

因此，我所做的是使用css来实现所需的效果

.component3 {
    position: relative;
 z-index: 1
}

.component2 {
   position: absolute;
  margin-left: calc(100% - 169px);
  margin-top: 13px;
  z-index: 2;
}

我已经达到了预期的产量 然而 一旦用户滚动页面，组件2将继续显示在页面上。它不应该滚动

---

我能为它做些什么？

您需要将组件2绝对定位到组件1，并变换原点，使其粘到底部边缘

position: absolute;
bottom: 0;
transform: translate(0, 100%);
right: 0;

---

在

处拨弄，您需要将组件2绝对定位在组件1上，并变换原点，使其粘在底部边缘，如图所示

position: absolute;
bottom: 0;
transform: translate(0, 100%);
right: 0;

---

拨弄

您可以尝试位置：粘滞。你能把组件3放在组件2里面吗？@JensAlenius No。。这是限制，请更新您的问题。你写道：由于某些限制，我不能把角度分量2放在角度分量3里面。那么它应该是另一种方式吗？@HarunYilmaz当我放置position:sticky和bottom:0时，它确实粘住了。。但这项要求没有得到满足。。comp2在COMP3上没有重叠。您可以尝试位置：sticky。你能把组件3放在组件2里面吗？@JensAlenius No。。这是限制，请更新您的问题。你写道：由于某些限制，我不能把角度分量2放在角度分量3里面。那么它应该是另一种方式吗？@HarunYilmaz当我放置position:sticky和bottom:0时，它确实粘住了。。但这项要求没有得到满足。。comp2在COMP3上没有重叠