freeCodeCamp

2.8 KiB

Raw Blame History

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

A próxima opção para a propriedade CSS position é absolute , que bloqueia o elemento no lugar em relação ao seu contentor pai. Ao contrário da posição relative , isso remove o elemento do fluxo normal do documento, portanto, os itens adjacentes ignoram-no. As propriedades de deslocamento CSS (superior ou inferior e esquerda ou direita) são usadas para ajustar a posição. Uma nuance no posicionamento absoluto é que ele vai bloquear o elemento 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 irá continuar a procurar a ligação e, por fim, irá assumir o padrão da tag body.

Instructions

Bloqueie o elemento #searchbar no canto superior direito do seu pai 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

2.8 KiB Raw Blame History