freeCodeCamp

2.8 KiB

Raw Blame History

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

La siguiente opción para la propiedad de 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

Bloquee el elemento #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

2.8 KiB Raw Blame History