2

I'm experimenting with CSS in a codecademy project, and I noticed that when I set a footer to have fixed positioning (with no left/right/top/bottom properties set), it just disappears. I would expect it to just shrink the way it does with absolute positioning, but it doesn't. Without fixed positioning the footer is there where it should be, but with it, it's gone. Why is it behaving this way?

The footer in question is selected in the CSS in the footer ruleset.

Here's the codepen: https://codepen.io/megas4ever/pen/ExwEEzv

And here's the full code:

    <!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>
Yash117
  • 53
  • 3

2 Answers2

1

Well, you've kind of hinted at the problem yourself already.

I noticed that when I set a footer to have fixed positioning (with no left/right/top/bottom properties set), it just disappears.

Just because you haven't provided left/right/top/bottom properties, doesn't mean they are not in effect.

In this case, the default values (which most likely reflect the effective top/left values with the default position: static) are just not ideal.

Since the footer takes up the full width of the screen, the left value likely defaults to 0; this is fine and that's not the source of the problem. But, since the footer is located on the bottom of your site, its auto/default top value max well be like 2000px -> you have to scroll down to even be able to see it.

Once you enabled fixed positioning, and didn't provide any top value yourself, that number would still be top: 2000px. And since it's now fixed in place, scrolling has no effect on it, which means its permanently located outside of your viewport. If your browser window was to be >2000px high, you would be able to see it, just hovering along by itself way below the rest of the site.

Raxi
  • 2,452
  • 1
  • 6
  • 10
  • No worries; if you want to test or see it; disable the `position: fixed` on the footer, temporarily remove a bunch of stuff from your ``; like remove the entire `
    ` and almost everything else above the `
    `; just leave (or add) like a little bit of simple content that takes up a third of height of your visible screen. Now the footer should show on screen directly under that content; taking up the full pagewidth and effectively being at like `top: 300px` or some such. Then enable the `
    `s `position: fixed` again, and you'll see exactly what happens.
     – Raxi Jan 02 '22 at 05:32
  • All that happens is the width shortens to fit the content - is that what's supposed to happen? – Yash117 Jan 02 '22 at 05:56
  • Yea. you basically see it retains it `top` and `left` values. The width changing is another side-effect but that wasn't so much related to the problem. Since your site had much more content initially, the footer was located way lower (i made up the `2000px`-value but it could easily be something like that); and similar to in this experiment, it wouldve stayed around there – Raxi Jan 02 '22 at 05:59
0

As Raxi has pointed out in the answer the rule of thumb is position:absolute affixes it self to parent element axis. BUT position:fixed affixes it self to the view port it does not care about anything else in between.

So when you adding position:fixed its goes to viewport which can be any thing based on your device or what ever as Raxi pointed out.

SIMPLyPUT its there but not in your field of vision becuase it made up its own mind where to place it self in empty vast space of view port.

NOW if we give it some coordinates it will behave as expected that is bootom:0; example below. but there is another problem hope you can pick it up.

 <!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>

PROBLEM when we added position:fixed and gave coord bottom:0 footer did find its elf in field view of view port but it has resized the width as it was display:inline element not as an display:block element.

its quirk mode sort of problem we have work arounds e.g. giving left:0; right:0; bottom:0; would sort of display as if block element, better option would be to give it width:100% 100% based on view port size etc which works great if there is no desired margin around body tag which 99% of websites specifically dont just as in your case example below;

 <!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>
Syed
  • 696
  • 1
  • 5
  • 11