2.8 KiB
2.8 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d781e367417b2b2512acb | Lock an Element to its Parent with Absolute Positioning | 0 | Bloquear un elemento a su padre con posicionamiento absoluto |
Description
position
CSS es absolute
, que bloquea el elemento en su lugar en relación con su contenedor principal. A diferencia de la posición relative
, esto elimina el elemento del flujo normal del documento, por lo que los elementos circundantes lo ignoran. Las propiedades de desplazamiento de CSS (superior o inferior e izquierda o derecha) se utilizan para ajustar la posición. Un matiz con posicionamiento absoluto es que se bloqueará en relación con su antepasado posicionado más cercano. Si olvida agregar una regla de posición al elemento principal, (esto generalmente se hace usando position: relative;
), el navegador seguirá buscando la cadena y, por último, usará la etiqueta del cuerpo de forma predeterminada. Instructions
#searchbar
en la parte superior derecha de su section
principal declarando su position
como absolute
. Dale las compensaciones top
y right
de 50 píxeles cada una. Tests
tests:
- text: 'El elemento <code>#searchbar</code> debe tener una <code>position</code> establecida en <code>absolute</code> .'
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
- text: 'Su código debe usar la compensación de CSS <code>top</code> de 50 píxeles en el elemento <code>#searchbar</code> .'
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
- text: 'Su código debe usar el desplazamiento de CSS <code>right</code> de 50 píxeles en el elemento <code>#searchbar</code> .'
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
Challenge Seed
<style>
#searchbar {
}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>
Solution
// solution required