我有一个问题，我的主要内容文本重叠在我的页脚前面。 到目前为止，我把页脚留在了底部，但当我键入更长的描述填充整个页面以便您可以滚动时，页脚就在底部文本的正下方，内容文本重叠。

我如何完全保持它在底部，而不是主要内容文本（或图像）重叠在页脚？

null

.grid{
    min-height: 92vh;
}

@media only screen and (max-width: 1200px) { 
    body { 

       font-size: 90%;
    } 
    
    footer {
        h1 {
          flex: 1;
        }
    }

} 

.title {
    position: relative;
    text-align: center;
    bottom: -30px;
}

.text {
    position: relative;
    text-align: center;
    bottom: -30px;
}

footer {
    min-height: 1vh;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    ul{
        list-style: none;
        display: flex;
        justify-content: center;
        font-size: 85%;
        li{
            margin-left: 15px;
        }
    }
}

.copyright {
    display: flex;
    justify-content: center;
}

<div class="grid">
        <div class="title"><h1>Title</h1></div>
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Dapibus ultrices in iaculis nunc sed augue lacus. Quam nulla porttitor massa id neque aliquam.</p>
            <p>Ultrices mi tempus imperdiet nulla malesuada. Eros in cursus turpis massa tincidunt dui ut ornare lectus.</p>
            <p>Egestas sed sed risus pretium. Lorem dolor sed viverra ipsum. Gravida rutrum quisque non tellus.</p>
            <p>Rutrum tellus pellentesque eu tincidunt tortor. Sed blandit libero volutpat sed cras ornare. Et netus et malesuada fames ac.</p>
            <p>Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Lacus sed viverra tellus in. Sollicitudin ac orci phasellus egestas.</p>
            <p>Purus in mollis nunc sed. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
            <p>Interdum consectetur libero id faucibus nisl tincidunt eget.</p>
            </div>
    </div>
    <footer>
        <ul>
            <div class="copyright">2020</div>
            <li class="link"><a href="link">link 1</a></li>
            <li class="link"><a href="link">link 2</a></li>
            <li class="link"><a href="link">link 3</a></li>
        </ul>
    </footer>

null