CSS Grid中position:relative的作用：显示异常与设置原因解析

我在分析《如何制作博客网站》教程时遇到两个技术问题：

1. 为何添加position:relative后，CSS Grid布局能显示三列，不添加时仅显示一列及一张图片？
2. 为何需要为CSS中的每个类都设置position:relative？

相关代码 #

CSS代码

.post
{
    position:relative;  
}
.post .contentBx
{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    margin-top: 20px;
}
.post .contentBx .postColumn
{
    position: relative;

}
.post .contentBx .postColumn .postBox
{
    position: relative;
    width: 100%;
    height: 400px;
    margin-top: 20px;

}

HTML代码

<!-- Latest posts  -->
<section class="post" id="post">
    <div class="title">
        <h2>Latest Post</h2>
        <p>"Lorem</p>
    </div>
    <div class="contentBx">
        <div class="postColumn">
            <div class="postBox">
                <div class="imgBx">
                    <img src="images/post1.jpg" class="cover">
                </div>
                <div class="textBx">
                    <h3>Lorem</h3>
                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
            <div class="postBox">
                <div class="imgBx">
                    <img src="images/post2.jpg" class="cover">
                </div>
                <div class="textBx">
                    <h3>Lorem</h3>
                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
            <div class="postBox">
                <div class="imgBx">
                    <img src="images/post3.jpg" class="cover">
                </div>
                <div class="textBx">
                    <h3>Lorem</h3>
                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
        </div>
        <div class="postColumn">
            <div class="postBox">
                <div class="imgBx">
                    <img src="images/post4.jpg" class="cover">
                </div>
                <div class="textBx">
                    <h3>Lorem</h3>
                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
            <div class="postBox">
                <div class="imgBx">
                    <img src="images/post5.jpg" class="cover">
                </div>
                <div class="textBx">
                    <h3>Lorem</h3>
                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
            <div class="postBox">
                <div class="imgBx">
                    <img src="images/post6.jpg" class="cover">
                </div>
                <div class="textBx">
                    <h3>Lorem</h3>
                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
        </div>
        <div class="postColumn">
            <div class="postBox">
                <div class="imgBx">
                    <img src="images/post7.jpg" class="cover">
                </div>
                <div class="textBx">
                    <h3>Lorem</h3>
                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
            <div class="postBox">
                <div class="imgBx">
                    <img src="images/post8.jpg" class="cover">
                </div>
                <div class="textBx">
                    <h3>Lorem</h3>
                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
            <div class="postBox">
                <div class="imgBx">
                    <img src="images/post9.jpg" class="cover">
                </div>
                <div class="textBx">
                    <h3>Lorem</h3>
                    <a href="#" class="btn">Read More</a>
                </div>
            </div>
        </div>
    </div>
</section>

问题1解答 #

position:relative和CSS Grid的列布局没有直接关联——Grid的列数是由grid-template-columns: 1fr 1fr 1fr直接控制的，理论上不管有没有relative都应该渲染三列。

你遇到的“不添加时仅显示一列一张图”，大概率是以下原因：

• 移除position:relative后，.contentBx的display:grid被其他全局CSS规则覆盖（比如继承了display:block）
• 浏览器缓存导致的渲染异常，刷新页面后即可恢复正常

简单说：你看到的现象是巧合或者样式冲突，position:relative并不是Grid显示三列的必要条件。

问题2解答 #

从当前代码来看，完全不需要给所有类都设置position:relative。这个属性的核心作用是：

1. 作为子元素position:absolute的定位参考容器
2. 配合top/left等属性微调元素位置
3. 创建新的堆叠上下文

你的代码里既没有绝对定位的元素，也没有用relative调整位置，所以这些position:relative都是多余的。教程里这么写可能是作者的个人习惯，或者是后续章节会用到绝对定位提前做铺垫，但就当前布局而言，只需要保留.contentBx的Grid相关属性，其他的position:relative全部删掉也不会影响布局。

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