为什么相对定位的元素不显示，换成绝对定位就显示了

我想做一个收尾固定中间滚动的布局，但是首位固定之后，中间的盒子用相对定位却不显示，换成绝对定位之后才成功显示，这是为什么咧？html和css代码贴在下面啦：

<body>
    <div class="header">

    </div>
    <div class="content">

    </div>
    <div class="footer">
        
    </div>
</body>

.header {
    position: fixed;
    width: 100vw;
    height: 6vh;
    background-color: pink;
}

.footer {
    position: fixed;
    width: 100vw;
    height: 6vh;
    bottom: 0;
    left: 0;
    background-color: pink;
}

.content {
    position: absolute;
    top: 6vh;
    bottom: 6vh;
    left: 0;
    right: 0;
    background-color: blue;
}

其实主要是你的起了作用下面代码的意思就是上距离6vh 下距离6vh 左右平铺但是只对 fixed、absoult起作用
因为他们脱离了文档流

top: 6vh;
bottom: 6vh;
left: 0;
right: 0;

但是你如果设置
relative:相对定位,参造物是其本身,并不脱离文档流,不管你怎么移动,它原有的位置还是会留着
lefe就是向左移动0 right 向右移动0 top向上 bottom向下，本身就是没有高度及宽度的所以不会呈现

body你也并没有为其设置高度整个现在的架子高度就是0

简单点说，absolute布局脱离文档流，所以按照你设置的top,bottom，left,rifght的位置显示
relative是相对布局，相对于元素本身原有的位置进行移动，你元素的高度是0，再怎么移动也看不到元素，加个高度就可以了，比如hight:50vh;

更多详细信息可以看这个 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
这个很具体
有用希望采纳一下