Question

我希望淡出两个独立div的顶部和底部。

现在我正在尝试使用position：absolute和top：顶部1和底部1px：底部1px。不适合我，使用父div？这导致他们出现在错误的地方。

这个小提琴显示了我的位置：

我想要的是每个div的顶部和底部都有小提琴中显示的淡入淡出。

Answer 1

您的.inner-1和.inner-2都有绝对定位的元素。这些元素相对于视口而不是它们的父级定位。您需要将.inner-1和.inner-2设置为相对位置：

.inner-1,
.inner-2 {
  position: relative;
}

这将导致渐变元素出现在这些容器的顶部和底部。