2.8 KiB
2.8 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d781e367417b2b2512acb | Lock an Element to its Parent with Absolute Positioning | 0 | Bloqueie um Elemento ao seu Pai com Posicionamento Absoluto |
Description
position
é absolute
, que bloqueia o elemento no lugar em relação ao seu contêiner pai. Ao contrário da posição relative
, isso remove o elemento do fluxo normal do documento, portanto, os itens adjacentes o ignoram. As propriedades de deslocamento CSS (superior ou inferior e esquerda ou direita) são usadas para ajustar a posição. Uma nuance com o posicionamento absoluto é que ele vai ser bloqueado em relação ao seu antepassado mais próximo posicionado. Se você esquecer de adicionar uma regra de posição ao item pai (isso geralmente é feito usando position: relative;
), o navegador continuará procurando a cadeia e, por fim, assumirá o padrão da tag body. Instructions
#searchbar
no canto superior direito de seu pai de section
, declarando sua position
como absolute
. Dê-lhe compensações top
e right
de 50 pixels cada. Tests
tests:
- text: 'O elemento <code>#searchbar</code> deve ter uma <code>position</code> definida como <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: 'Seu código deve usar o deslocamento CSS <code>top</code> de 50 pixels no 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: 'Seu código deve usar o deslocamento CSS <code>right</code> de 50 pixels no 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