Footer overlaps content above it

问题

I sticked footer to bottom of page, but somehow it doesn't keep flow of previous element, which is now likely below (in Z axis) footer. Footer should be just lower than .center-main element. However that one has absolute property, cause either way it doesn't fit in center of page - when other than 'position: absolute' it is below .cat-menu element, BUT footer still overlaps it.

Problematic CSS part:

.cat-menu
{
    width: 20%;
    margin: 3px;
    display: inline-block;
    border:1px solid blue;

}

.center-main
{
    width: 79%;
    position: absolute;
    margin: 3px;
    display: inline-block;
    border: 1px solid red;
}

footer
{
    clear: both;
    border: 2px solid red;
    text-align: center;
    position: fixed;
    display: block;
    bottom: 0;
    width: 99.7%;
}

Whole page: https://jsfiddle.net/tnmmoLnq/1/ (those buttons at center of page are bad positioned on jsfiddle - on my PC they are ok).

回答1:

Your fixed footer will always be overlapping the container (unless it (the container) has a height set). What you need to do is create an outer-container that the footer will overlap, and an inner-container with a marin-bottom the same height as your footer.

FIDDLE

.center-main-inner
{
    width: 79%;
    position: relative;
    margin: 3px;
    display: inline-block;
    border: 1px solid #0000FF;
    margin-bottom:20px;
}

And here is static -- non fixed version:

updated fiddle

来源：https://stackoverflow.com/questions/34552858/footer-overlaps-content-above-it