html - 位于两个独立 div 的顶部和底部

Question

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

现在我正在尝试在顶部使用 position:absolute 和 top:1px，在底部使用 bottom:1px。对我不起作用，使用父 div？这导致它们出现在错误的地方。

这个 fiddle 显示了我在哪里:

http://jsfiddle.net/mstefanko/23mfk/

我想要的是让每个 div 的顶部和底部在 fiddle 中显示淡入淡出。

Answer 1

您的 .inner-1 和 .inner-2 都包含绝对定位元素。这些元素是相对于视口(viewport)而不是它们的父元素定位的。您需要将 .inner-1 和 .inner-2 设置为相对位置:

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

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

演示:http://jsfiddle.net/23mfk/1/