css - 在具有透明div的部分的底部淡出文本，但在叠加div之后，高度保持在部分下方

我正在尝试在一段文字的底部获得良好的淡入淡出效果，作为“阅读更多”指示。

我一直在关注this和其他教程，目前我的代码如下:

html

<section>
    <p>malesuada fames ac turpis egestas...leo.</p>
    <p>malesuada fames ac turpis egestas...leo.</p>
    <div class="fadeout"></div>
</section>
<p>Stuff after</p>

的CSS

.fadeout {
    position: relative;
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}

jsFiddle

问题是，即使当我将透明div放置在文本主体上时，“4st”的空间也仍然存在于“其他 Material ”之间。

有任何想法吗？

最佳答案

相对位置元素不会从常规html流中删除，因此，如果围绕保留的初始空间移动它，仍然会保留它，但是如果使用绝对定位，情况并非如此

.fadeout {
    position: absolute;
    bottom: 0em;
    width:100%;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}
section {position:relative}

DEMO