Lock an Element to the Browser Window with Fixed Positioning

Lock an Element to the Browser Window with Fixed Positioning
0

#1

Tell us what’s happening:
What’s the difference between fixed and absolute position? It looks kinds of same to me.

Your code so far


<style>
  #navbar {
    position: fixed;
    top: 0px;
    left: 0px;
    
    width: 100%;
    background-color: #767676;
  }
  nav ul {
    margin: 0px;
    padding: 5px 0px 5px 30px;
  }
  nav li {
    display: inline;
    margin-right: 20px;
  }
  a {
    text-decoration: none;
  }
</style>
<body>
  <header>
    <h1>Welcome!</h1>
    <nav id="navbar">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
  </header>
  <p>I shift up when the #navbar is fixed to the browser window.</p>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning


#2

‘fixed’ is relative the browser
‘absolute’ is relative to the html parent container

hope this helps.


#3

Mine looks exactly like the snip above, but not letting me pass successfully. I’ve searched quite a bit and every example I can find looks like mine. What am I missing?


#4

If you’re sure it’s the same, clear you cache and try again. Try another browser if that does not work. FCC is geared to work best on Chrome but things can get all clogged up.


#5

I cleared cache, nothing. That was Chrome. So then I tried it in Internet Explorer and there was nothing in the browser. I’m so lost…


#6

In that case can you provide the code so anyone can find the problem in it.


#7


#8

What error do you get.?


#9

it says:

The #navbar element should have a position set to fixed.


#10

The test requires only three lines of code, maybe you can reset your code and try it again


#11

That did it! Thanks so much! Really stoked to find the help from all of you. I’m sure I’ll be back soon.