2.8 KiB
2.8 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d781e367417b2b2512acc | Lock an Element to the Browser Window with Fixed Positioning | 0 | https://scrimba.com/c/c2MDNUR |
Description
fixed
position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere.
One key difference between the fixed
and absolute
positions is that an element with a fixed position won't move when the user scrolls.
Instructions
navbar
. Change its position
to fixed
, and offset it 0 pixels from the top
and 0 pixels from the left
. Notice the (lack of) impact to the h1
position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately.
Tests
tests:
- text: 'The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.'
testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");'
- text: 'Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'
testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
- text: 'Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'
testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
Challenge Seed
<style>
#navbar {
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>
Solution
// solution required