css - 如何用div覆盖滚动区域？

Question

这是一个简单的例子。

我想用.cover填充.fixed。

但是我尝试了一些方法都没有用。

.fixed {
  position: fixed;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 300px;
  border: 1px solid #333;
  overflow: auto;
}
.cover {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}
  
.content {
  position: relative;
  height: 1000px;
  width: 10px;
  margin-left: 10px;
  background-color: tan;
}

<div class="fixed">
  <div class="cover"></div>
  <div class="content"></div>
</div>

Answer 1

我认为这可以满足您的需求。

.fixed {
  position: fixed;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 300px;
  border: 1px solid #333;
  overflow: auto;
}

.cover {
  position: sticky;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
}

.content {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 1000px;
  width: 10px;
  margin-left: 10px;
  background-color: tan;
}

}

<div class="fixed">
  <div class="content"></div>
  <div class="cover"></div>
</div>