伪元素与相对/绝对定位关联问题：卡片文本渐变异常排查

问题背景 #

我想实现卡片文本底部的渐隐效果，给文本的伪元素应用了线性渐变背景，初始CSS代码如下：

.card-content .text {
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.card-content .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, white, transparent)
}

但实际效果不符合预期：渐隐效果没有在文本底部结束，而是延伸到了“See More”按钮的底部。我推测是伪元素使用position: absolute脱离文档流导致的问题，这个推测是否正确？

后来我给.text元素添加了position: relative，就实现了预期效果，修改后的CSS代码如下：

.card-content .text {
    position: relative;
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.card-content .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, white, transparent)
}

我不清楚这个操作解决问题的原因，同时想知道：为伪元素应用position: absolute时，是否通常需要为原元素设置position: relative？

原因分析 #

你的推测完全正确，问题的核心在于绝对定位元素的定位上下文规则：

• 当元素设置position: absolute时，它会相对于最近的、设置了非static定位（relative/absolute/fixed/sticky均可）的祖先元素进行定位。如果没有这样的祖先元素，它会相对于根元素（<html>）定位。
• 你最初的代码中，.text元素是默认的position: static，所以它的伪元素会向上寻找最近的非static定位祖先——也就是.card-content（因为该元素设置了position: relative）。此时伪元素的bottom: 0是相对于.card-content的底部，所以渐变会覆盖到按钮所在的区域。
• 当给.text添加position: relative后，伪元素的定位上下文就变成了.text本身，伪元素的bottom: 0、width: 100%、height: 100%都是相对于.text的尺寸，因此渐变刚好覆盖在文本区域的底部，达到了预期的渐隐效果。

关于定位的疑问解答 #

给伪元素设置position: absolute时，不是必须给原元素设置position: relative，这取决于你想要的定位效果：

• 如果希望伪元素相对于原元素进行定位（比如在原元素内部的某个位置），那么必须给原元素设置非static定位，最常用的就是position: relative（因为它不会改变原元素在文档流中的位置）。
• 如果不需要伪元素相对原元素定位，比如想让它相对于更外层的容器甚至整个页面定位，那就不需要给原元素设置相对定位。

完整参考代码 #

HTML #

<div class="card">
    <div class="card-img">
        <img src="imgs/img1.jpg" alt="">
    </div>
    <div class="card-content">
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <span class="see-more-btn"> See More </span>
    </div>
</div>

CSS #

.card {
    position: relative;
    background: #fff;
    width: 350px;
    box-shadow: 0 5px 25px rgba(2, 2, 2, 0.25);
    border-radius: 10px;
    overflow: hidden;
}

.card .card-img {
    position: relative;
    width: 350px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card .card-img img {
    width: 100%;
    height: 100%;
}

.card-content {
    position: relative;
    text-align: center;
    margin: 15px;
}

.card-content .text {
    position: relative;
    font-size: .9em;
    text-align: left;
    height: 100px;
    overflow: hidden;
}

.card-content .text:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, blue, transparent)
}

内容的提问来源于stack exchange，提问作者backtosqaure1