3.0 KiB
3.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d781e367417b2b2512acc | Lock an Element to the Browser Window with Fixed Positioning | 0 | Bloquee un elemento en la ventana del navegador con posicionamiento fijo |
Description
fixed
, que es un tipo de posicionamiento absoluto que bloquea un elemento en relación con la ventana del navegador. Similar al posicionamiento absoluto, se usa con las propiedades de desplazamiento de CSS y también elimina el elemento del flujo normal del documento. Otros elementos ya no se "dan cuenta" de dónde se coloca, lo que puede requerir algunos ajustes de diseño en otros lugares. Una diferencia clave entre las posiciones fixed
y absolute
es que un elemento con una posición fija no se moverá cuando el usuario se desplace. Instructions
navbar
de navbar
. Cambie su position
a fixed
, y desplace 0 píxeles desde la top
y 0 píxeles desde la left
. Observe el (falta de) impacto en la posición h1
, no se ha empujado hacia abajo para acomodar la barra de navegación y debería ajustarse por separado. Tests
tests:
- text: 'El elemento <code>#navbar</code> debe tener una <code>position</code> establecida como <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: 'Su código debe usar la compensación de CSS <code>top</code> de 0 píxeles en el elemento <code>#navbar</code> .'
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: 'Su código debe usar el desplazamiento de CSS <code>left</code> de 0 píxeles en el elemento <code>#navbar</code> .'
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