Html css位置固定在div内

我有一个div，其中有一些内容，我想在底部显示文本淡入淡出效果。为了做到这一点，我必须使用

位置：fixed在
div中
使用
overflow-y:滚动

提供淡入淡出效果的div不会出现。我尝试过不同的解决方案，但没有一个在一个分区内有效

下面是一个代码示例
我将尝试使用
绝对
定位。比如：


请注意，我将
溢出：滚动
.content
而不是
.outer
以防止模糊滚动

使用
fixed
定位将模糊放置在用户视口的底部，而不是元素
 我会尝试使用
absolute
定位。比如：


请注意，我将
溢出：滚动
.content
而不是
.outer
以防止模糊滚动

使用
fixed
定位将模糊放置在用户视口的底部，而不是元素
 您应该查看
绝对
，而不是
固定
，因为这是相对于视口的。是的，尝试过，但滚动文本时也会滚动。您应该查看
绝对值
，而不是
固定值
，因为它是相对于视口的。是的，试过了，但是当滚动文本时，文本也会滚动。现在用
.outer
上的
.fadeout
替换
:after
，您的钱就对了：这也是一个很好的解决方案。我喜欢使用用户的原始结构（只要它有效）来回答问题，以帮助他们理解为什么他们的代码最初不能工作。有效性可以在这里讨论。淡出显然是样式化的，没有语义目的。因此，它应该是css的一部分，而不是标记。但我明白你的意思…现在用
.outer
上的
.fadeout
替换
：在
.outer
上的
之后，你的钱就对了：这也是一个很好的解决方案。我喜欢使用用户的原始结构（只要它有效）来回答问题，以帮助他们理解为什么他们的代码最初不能工作。有效性可以在这里讨论。淡出显然是样式化的，没有语义目的。因此，它应该是css的一部分，而不是标记。但我明白你的意思。。。
.outer {
  height: 200px;
  border: 2px solid black;
  position: relative;
  overflow: hidden;
}

.content {
  height: 100%;
  overflow: scroll;
}

.fadeout {
  width: 100%;
  height: 40px;
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(95%, rgba(255, 255, 255, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}