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

Question

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

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

这个小提琴显示了我在哪里：

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

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

Answer 1

你.inner-1和.inner-2两者都有绝对定位的元素。这些元素是相对于视口定位的，而不是它们的父元素。您需要设置.inner-1和.inner-2到一个相对位置：

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

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

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