為什么這個頁腳元素在它有固定位置時就消失了？[復制]-有解無憂

這個問題在這里已經有了答案：為什么我的絕對/固定定位元素不在我期望的位置？ (3 個回答) 8 小時前關閉。

我正在 codecademy 專案中試驗 CSS，我注意到當我將頁腳設定為具有固定位置（沒有設定左/右/上/下屬性）時，它就會消失。我希望它只是縮小絕對定位的方式，但事實并非如此。如果沒有固定的定位，頁腳就在它應該在的地方，但是有了它，它就不見了。為什么會這樣？

有問題的頁腳是在footer規則集中的 CSS 中選擇的。

這是代碼筆：https ://codepen.io/megas4ever/pen/ExwEEzv

這是完整的代碼：

    <!DOCTYPE html>
    <html>
      
      <head>
        <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
        <link href='style.css' rel='stylesheet' type='text/css'/>
<style>  

html, body {
      margin: 0;
      padding: 0;
    }
    
    header {
      background-color: #333333;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1;
    }
    
    nav {
      margin: 0;
      padding: 20px 0;
    }
    
    nav li {
      display: inline-block;
      width: 80px;
      color: #fff;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
    }
    
    main {
      text-align: center;
      position: relative;
      top: 80px;
    }
    
    main h1 {
      color: #333;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 70px;
      margin-top: 0px;
      padding-top: 80px;
      margin-bottom: 80px;
      text-transform: uppercase;
    }
    
    footer {
      background-color: #333;
      color: #fff;
      padding: 30px 0;
      position: fixed;
    }
    
    footer p {
      font-family: 'Raleway', sans-serif;
      text-transform: uppercase;
      font-size: 11px;
    }
    
    .container {
      max-width: 940px;
      margin: 0 auto;
      padding: 0 10px;
      text-align: center;
    }
    
    .jumbotron {
      height: 800px;
      background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    
    .btn-main {
      background-color: #333;
      color: #fff;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 18px;
      letter-spacing: 1.3px;
      padding: 16px 40px;
      text-decoration: none;
      text-transform: uppercase;
    }
    
    .btn-default {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 1.3px;
      padding: 10px 20px;
      text-decoration: none;
      text-transform: uppercase;  
      margin-bottom: 20px;      
    }
    
    .supporting {
      padding-top: 80px;
      padding-bottom: 100px;
    }
    
    .supporting .col {
      font-family: 'Raleway', sans-serif;
      text-align: center;
      display: inline-block;
      width: 200px;
      height: 200px;
    }
    
    .supporting img {
      height: 32px;
    }
    
    .supporting h2 {
      font-weight: 600;
      font-size: 23px;
      text-transform: uppercase;
    }
    
    .supporting p {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      padding: 0 20px;
      margin-bottom: 20px;
    }
    
    .supporting a {
      background-color: white;
      color: #333333;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 1.3px;
      text-decoration: none;
      text-transform: uppercase;
      padding: 10px;
      margin-bottom: 10px;
      border: 2px solid #333333; 
    }
    
    @media (max-width: 500px) {
      main h1 {
        font-size: 50px;
        padding: 0 40px;
      }
    
      .supporting .col {
        width: 100%;
      }
    }

</style>
      </head>
    
      <body>
        
        <header>
            <nav>
              <ul>
                <li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
              </ul>
            </nav>
        </header>
    
        <main>
          <div class="jumbotron">
            <div class="container">  
              <h1>We are Broadway</h1>
              <a href="#" class="btn-main"> Get Started </a>
            </div>
          </div>
        </main>
    
        <section class="supporting">
          <div class="container">
            
            <div class="col">
              <img src="https://content.codecademy.com/projects/broadway/design.svg">
              <h2>Design</h2>
              <p>Make your projects look great and interact beautifully.</p>
              <a href="#"> Learn More</a><br>
            </div>
            
            <div class="col">
              <img src="https://content.codecademy.com/projects/broadway/develop.svg">
              <h2>Develop</h2>
              <p>Use modern tools to turn your design into a web site</p>
              <a href="#"> Learn More</a><br>
            </div>
            
            <div class="col">
              <img src="https://content.codecademy.com/projects/broadway/deploy.svg">
              <h2>Deploy</h2>
              <p>Use modern tools to turn your design into a web site</p>
              <a href="#"> Learn More</a><br>
            </div>
            
          </div>
        </section>
    
        <footer>
          <div class="container">
            <p>&copy; Broadway 2017</p>
          </div>
        </footer>
        
      </body>
    </html>

uj5u.com熱心網友回復：

嗯，你自己已經暗示了這個問題。

我注意到當我將頁腳設定為固定位置（沒有設定左/右/上/下屬性）時，它就會消失。

僅僅因為您沒有提供left/right/top/bottom屬性，并不意味著它們無效。

在這種情況下，默認值（最有可能反映默認值的有效頂部/左側值position: static）并不理想。

由于頁腳占據了螢屏的整個寬度，因此該left值可能默認為 0；這很好，這不是問題的根源。但是，由于頁腳位于您網站的底部，它的自動/默認top值最大就像2000px-> 您必須向下滾動才能看到它。

一旦您啟用fixed定位，并且自己沒有提供任何top值，該數字仍然是top: 2000px. 并且由于它現在fixed就位，滾動對其沒有影響，這意味著它永久位于您的視口之外。如果您的瀏覽器視窗的高度大于 2000 像素，您將能夠看到它，只需將它自己懸停在網站的其余部分下方即可。

uj5u.com熱心網友回復：

正如 Raxi 在答案中指出的那樣，經驗法則是將其自身附加position:absolute到父元素軸上。但是將 position:fixed它自己貼在視口上，它不關心中間的任何其他東西。

因此，當您將position:fixed其添加到視口時，視口可以是基于您的設備或 Raxi 指出的任何內容。

簡單地把它放在那里，但不在你的視野中，因為它自己決定將它自己放置在空曠的廣闊空間中的哪個位置。

現在，如果我們給它一些坐標，它將按預期運行，如下bootom:0;例所示。但還有一個問題希望你能把它撿起來。

 <!DOCTYPE html>
    <html>
      
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
        <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
        <link href='style.css' rel='stylesheet' type='text/css'/>
<style>  

html, body {
      margin: 0;
      padding: 0;
    }
    
    header {
      background-color: #333333;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1;
    }
    
    nav {
      margin: 0;
      padding: 20px 0;
    }
    
    nav li {
      display: inline-block;
      width: 80px;
      color: #fff;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
    }
    
    main {
      text-align: center;
      position: relative;
      top: 80px;
    }
    
    main h1 {
      color: #333;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 70px;
      margin-top: 0px;
      padding-top: 80px;
      margin-bottom: 80px;
      text-transform: uppercase;
    }
    
    footer {
      background-color: #333;
      color: #fff;
      padding: 30px 0;
      position: fixed;
      bottom:0;

    }
    
    footer p {
      font-family: 'Raleway', sans-serif;
      text-transform: uppercase;
      font-size: 11px;
    }
    
    .container {
      max-width: 940px;
      margin: 0 auto;
      padding: 0 10px;
      text-align: center;
    
    }
    
    .jumbotron {
      height: 800px;
      background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    
    .btn-main {
      background-color: #333;
      color: #fff;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 18px;
      letter-spacing: 1.3px;
      padding: 16px 40px;
      text-decoration: none;
      text-transform: uppercase;
    }
    
    .btn-default {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 1.3px;
      padding: 10px 20px;
      text-decoration: none;
      text-transform: uppercase;  
      margin-bottom: 20px;      
    }
    
    .supporting {
      padding-top: 80px;
      padding-bottom: 100px;
    }
    
    .supporting .col {
      font-family: 'Raleway', sans-serif;
      text-align: center;
      display: inline-block;
      width: 200px;
      height: 200px;
    }
    
    .supporting img {
      height: 32px;
    }
    
    .supporting h2 {
      font-weight: 600;
      font-size: 23px;
      text-transform: uppercase;
    }
    
    .supporting p {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      padding: 0 20px;
      margin-bottom: 20px;
    }
    
    .supporting a {
      background-color: white;
      color: #333333;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 1.3px;
      text-decoration: none;
      text-transform: uppercase;
      padding: 10px;
      margin-bottom: 10px;
      border: 2px solid #333333; 
    }
    
    @media (max-width: 500px) {
      main h1 {
        font-size: 50px;
        padding: 0 40px;
      }
    
      .supporting .col {
        width: 100%;
      }
    }

</style>
      </head>
    
      <body>
        
        <header>
            <nav>
              <ul>
                <li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
              </ul>
            </nav>
        </header>
    
        <main>
          <div class="jumbotron">
            <div class="container">  
              <h1>We are Broadway</h1>
              <a href="#" class="btn-main"> Get Started </a>
            </div>
          </div>
        </main>
    
        <section class="supporting">
          <div class="container">
            
            <div class="col">
              <img src="https://content.codecademy.com/projects/broadway/design.svg">
              <h2>Design</h2>
              <p>Make your projects look great and interact beautifully.</p>
              <a href="#"> Learn More</a><br>
            </div>
            
            <div class="col">
              <img src="https://content.codecademy.com/projects/broadway/develop.svg">
              <h2>Develop</h2>
              <p>Use modern tools to turn your design into a web site</p>
              <a href="#"> Learn More</a><br>
            </div>
            
            <div class="col">
              <img src="https://content.codecademy.com/projects/broadway/deploy.svg">
              <h2>Deploy</h2>
              <p>Use modern tools to turn your design into a web site</p>
              <a href="#"> Learn More</a><br>
            </div>
            
          </div>
        </section>
    
        <footer>
          <div class="container">
            <p>&copy; Broadway 2017</p>
          </div>
        </footer>
        
      </body>
    </html>

當我們添加position:fixed并給出坐標bottom:0頁腳時的問題確實在視口的視野中找到了它的精靈，但它已經調整了寬度，因為它是display:inline元素而不是display:block元素。

它的怪癖模式型別的問題我們有解決方法，例如，給予left:0; right:0; bottom:0;會像塊元素一樣顯示，更好的選擇是width:100%根據視口大小等提供100%，如果 body 標簽周圍沒有所需的邊距，則效果很好，即 99百分比的網站特別不像下面的例子那樣；

 <!DOCTYPE html>
    <html>
      
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
        <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
        <link href='style.css' rel='stylesheet' type='text/css'/>
<style>  

html, body {
      margin: 0;
      padding: 0;
    }
    
    header {
      background-color: #333333;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1;
    }
    
    nav {
      margin: 0;
      padding: 20px 0;
    }
    
    nav li {
      display: inline-block;
      width: 80px;
      color: #fff;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
    }
    
    main {
      text-align: center;
      position: relative;
      top: 80px;
    }
    
    main h1 {
      color: #333;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 70px;
      margin-top: 0px;
      padding-top: 80px;
      margin-bottom: 80px;
      text-transform: uppercase;
    }
    
    footer {
      background-color: #333;
      color: #fff;
      padding: 30px 0;
      position: fixed;
      bottom:0;
      width:100%;

    }
    
    footer p {
      font-family: 'Raleway', sans-serif;
      text-transform: uppercase;
      font-size: 11px;
    }
    
    .container {
      max-width: 940px;
      margin: 0 auto;
      padding: 0 10px;
      text-align: center;
    
    }
    
    .jumbotron {
      height: 800px;
      background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    
    .btn-main {
      background-color: #333;
      color: #fff;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 18px;
      letter-spacing: 1.3px;
      padding: 16px 40px;
      text-decoration: none;
      text-transform: uppercase;
    }
    
    .btn-default {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 1.3px;
      padding: 10px 20px;
      text-decoration: none;
      text-transform: uppercase;  
      margin-bottom: 20px;      
    }
    
    .supporting {
      padding-top: 80px;
      padding-bottom: 100px;
    }
    
    .supporting .col {
      font-family: 'Raleway', sans-serif;
      text-align: center;
      display: inline-block;
      width: 200px;
      height: 200px;
    }
    
    .supporting img {
      height: 32px;
    }
    
    .supporting h2 {
      font-weight: 600;
      font-size: 23px;
      text-transform: uppercase;
    }
    
    .supporting p {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      padding: 0 20px;
      margin-bottom: 20px;
    }
    
    .supporting a {
      background-color: white;
      color: #333333;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 1.3px;
      text-decoration: none;
      text-transform: uppercase;
      padding: 10px;
      margin-bottom: 10px;
      border: 2px solid #333333; 
    }
    
    @media (max-width: 500px) {
      main h1 {
        font-size: 50px;
        padding: 0 40px;
      }
    
      .supporting .col {
        width: 100%;
      }
    }

</style>
      </head>
    
      <body>
        
        <header>
            <nav>
              <ul>
                <li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
              </ul>
            </nav>
        </header>
    
        <main>
          <div class="jumbotron">
            <div class="container">  
              <h1>We are Broadway</h1>
              <a href="#" class="btn-main"> Get Started </a>
            </div>
          </div>
        </main>
    
        <section class="supporting">
          <div class="container">
            
            <div class="col">
              <img src="https://content.codecademy.com/projects/broadway/design.svg">
              <h2>Design</h2>
              <p>Make your projects look great and interact beautifully.</p>
              <a href="#"> Learn More</a><br>
            </div>
            
            <div class="col">
              <img src="https://content.codecademy.com/projects/broadway/develop.svg">
              <h2>Develop</h2>
              <p>Use modern tools to turn your design into a web site</p>
              <a href="#"> Learn More</a><br>
            </div>
            
            <div class="col">
              <img src="https://content.codecademy.com/projects/broadway/deploy.svg">
              <h2>Deploy</h2>
              <p>Use modern tools to turn your design into a web site</p>
              <a href="#"> Learn More</a><br>
            </div>
            
          </div>
        </section>
    
        <footer>
          <div class="container">
            <p>&copy; Broadway 2017</p>
          </div>
        </footer>
        
      </body>
    </html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401212.html

標籤：html css

上一篇：使用現有的javascript影片參考網站的一部分

下一篇：如何在HTML和CSS中制作5列的一行