Question

我决定选择位置：固定，因为它覆盖了整个页脚（没有空格）;但是，当我尝试从下到上调整页面大小时，页脚会覆盖内容。我知道这是固定位置的想法，以保持页脚底部，但是否有办法让它看起来不同？如何防止页脚隐藏内容？

body {
    box-sizing: content-box; 
}  

section {
    padding: 20px 0px; 
}


#content {
    font-size: 20px;
    font-family: 'American Typewriter';
    text-align: center; 
}


.footer { 
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    margin-left: 0px;
    margin-right: auto;
    display: block;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Sample</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <section>
      <div id="content">Lorem ipsum dolor sit amet, aperiam utroque pertinacia eam ut, quando voluptua eos te, vide animal 
            repudiare eu nec. Eum eligendi perfecto cu. Ne pri invenire accommodare complectitur. Cu legere regione epicurei cum, 
            usu no velit dicta mollis. Alia equidem eum eu. Sit ne dolore molestiae.

            Minim ludus in vim. Facer percipit nec cu. Aeterno indoctum conceptam an eam. Mea civibus fabellas an, ad sit tempor 
            everti noluisse, in latine conceptam quo.
      </div>
    </section>

      <section> 
        <img src="http://www.durangobrewing.com/Images/Beer%20Pop%20Outs/DBC_Web_PopOut_paleAle_Footer.png" class="footer">
      </section>
  </body>
</html>

1

Answer 1

在页脚中添加-1 z-index。它指定元素的堆栈顺序。

＆＃13;

body {
    box-sizing: content-box; 
}  

section {
    padding: 20px 0px; 
}


#content {
    font-size: 20px;
    font-family: 'American Typewriter';
    text-align: center; 
}


.footer { 
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    margin-left: 0px;
    margin-right: auto;
    display: block;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    z-index:-1;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Sample</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <section>
      <div id="content">Lorem ipsum dolor sit amet, aperiam utroque pertinacia eam ut, quando voluptua eos te, vide animal 
            repudiare eu nec. Eum eligendi perfecto cu. Ne pri invenire accommodare complectitur. Cu legere regione epicurei cum, 
            usu no velit dicta mollis. Alia equidem eum eu. Sit ne dolore molestiae.

            Minim ludus in vim. Facer percipit nec cu. Aeterno indoctum conceptam an eam. Mea civibus fabellas an, ad sit tempor 
            everti noluisse, in latine conceptam quo.
      </div>
    </section>

      <section> 
        <img src="http://www.durangobrewing.com/Images/Beer%20Pop%20Outs/DBC_Web_PopOut_paleAle_Footer.png" class="footer">
      </section>
  </body>
</html>

＆＃13;

在调整大小时，如何使位置固定页脚不覆盖浏览器的所有其他元素？

1 个答案: