Javascript 固定透明区域后面的遮罩元件

我有一个div

container1

，它包含与其他div或svg类似的不同元素

这些元素可以上下滚动

container1

但是现在有一个

container1

区域，这些元素不应该可见，而

container1

本身通常仍然可见。我必须用一种看不见的元素来掩盖它们

在下图中，您可以看到：

集装箱1

：红色区域

容器内的元素1

：黑色

container1

可见但元素不可见的区域：橙色矩形

但重要的是，元素的部分（例如svg）不在该区域后面，仍然可见

---

有什么方法可以遮罩特定区域吗？

如果“橙色矩形”后面的元素被隐藏，那是因为“橙色矩形”有背景。HTML元素（如span、div、p等）不能隐藏元素，除非这些元素有背景。 如果橙色矩形有背景，则其后面的元素将被隐藏，但您可以使用

z-index

属性将矩形后面的元素置于前面