如何使用div覆盖可滚动区域？

Question

这是一个简单的例子。

我想用.fixed填充.cover。

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

.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>

Answer 2

将z-index添加到您的.cover

html, body {
    height: 100%;
}
.fixed {
  position: fixed;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 300px;
  border: 1px solid #333;
  overflow: auto;
}
.cover {
	position: fixed;
	left: 50px;
	background-color: rgba(0,0,0,.5);
	z-index: 9999;
	width: 185px;
	height: 300px;
}
  
.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 3

请使用以下内容更新您的属性，并检查其是否可以解决您的问题：

.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: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,.5);
}

.content {
  position: relative;
  height: 100vh;
  width: 10px;
  margin-left: 10px;
  background-color: tan;
}