为什么我的标题不在我的内容下方？答案

【问题标题】：Why doesnt my header stay under my content?为什么我的标题不在我的内容下方？
【发布时间】：2016-07-24 09:24:26
【问题描述】：

无论我尝试什么，我的页脚都会停留在屏幕底部，而不是在我需要的内容之后。它停留在我的屏幕底部和它应该在我的内容之上。我将页眉（不在 jsfiddle 中）、内容和页脚 div 放在一个高度为 100% 的包装器中。这是 jsfiddle jsfiddle 页脚甚至没有出现在小提琴上！！！

CSS

body{

    background-color: #555;
    margin: 0;   
    padding: 0;
    height: 100%;

}

#wrapper{
    min-height: 100%;
    position: relative;
    height: 100%;
}

#content{
    top: 140px;
    position: absolute;
    height: 90%;
    width: 100%;
    font-family: 'Times New Roman', Times, serif;
    padding-bottom: -70px;
}

#content h2{
    text-align: center; ;
    color: white;
    margin: 50px auto;
    width: 60%;
}

/*Footer*/
#footer{
    width: 100%;
    height: 70px;
    background-color: black;
    color: white;   
    font-size: 12px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9999;
    }

#footer p{
    padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
<body>

<div id="wrapper">

<div id="header"></div>  

<a href="restaurant_reserve.php"><button id="reserve-button" class="w3-btn-block w3-hover-white" style="font-weight: bold; font-size: 15px; position: fixed; top: 100px; z-index: 999;">Reserve Now!</button></a>

<div id="content">

    <img style="width: 100%; height: auto;" src="images/slider/examples/slide-example3.png">

<h2><strong>Come and devour Friendz' hunger satisfying selection of the
    most delectable soul foods around!</strong>
</h2>

<div class="info-block1">
    <img src="images/restaurant_examples/example1.jpg" title="Chicken breast with veggies" alt="Chicken breast with veggies">
    <p> Come and enjoy our delicious chicken breast and vegetables. This is just test text that is
    be used for demonstration and to take up space.</p>   
</div>

<div class="info-block2">
    <img src="images/restaurant_examples/example2.jpg" title="Some type of food" alt="example2">
    <p> This is just generic text. I am writing and typing this off of the top of my head
    and it is meant just to take up space.</p>   
</div>

<div class="info-block1">
    <img src="images/restaurant_examples/example3.jpg" title="Some type of food" alt="example2">
    <p>This is even more generic text that is being used to take up 
        space and demonstrate potential formatting of the website.</p>
</div>

<div class="info-block2">
    <img src="images/restaurant_examples/example4.jpg" title="Some type of food" alt="example2">
    <p>Lorem ipsum dolor sit amet, fabulas phaedrum mea no, an eum utinam 
        libris dictas, audire expetenda eu quo.
    </p>
</div>

</div>

<div id="footer">
    <p>Footer Test</p>
</div>

</div><!--end wrapper div-->


</body>
</html>

请帮忙

【问题讨论】：

#header 没有在您的 JSFiddle 中定义，它也没有内容，所以默认情况下没有任何内容可显示。尝试改写您的问题或提供相关代码。
对不起@rsn 我的意思是 FOOTER 不是标题
如果你想让页脚出现在内容之后，那你为什么给它一个绝对位置呢？只需从 #footer 规则中删除 position:absolute、bottom:0 和 left:0 属性即可。

标签： html css footer sticky-footer

【解决方案1】：

将#footer 的“位置”更改为relative。
将#footer div 放在#content div 中。

如果你希望它在内容而不是over，你为什么要为#footer设置z-index？另外，摆脱你的内联 css，这就是 .css 文件的用途..

【讨论】：