freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d781e367417b2b2512ac9	Change an Element's Relative Position	0		Cambiar la posición relativa de un elemento

Description

CSS trata cada elemento HTML como su propia caja, que generalmente se conoce como el CSS Box Model . Los elementos de nivel de bloque se inician automáticamente en una nueva línea (piense en encabezados, párrafos y divs) mientras que los elementos en línea se ubican dentro del contenido que lo rodea (como imágenes o tramos). El diseño predeterminado de los elementos de esta manera se denomina normal flow de un documento, pero CSS ofrece la propiedad de posición para anularlo. Cuando la posición de un elemento se establece en relative , le permite especificar cómo CSS debe moverlo en relación con su posición actual en el flujo normal de la página. Se empareja con las propiedades de desplazamiento de CSS de left o right , y de top o bottom . Estos dicen cuántos píxeles, porcentajes o ems para mover el elemento lejos de donde normalmente se coloca. El siguiente ejemplo aleja el párrafo 10 píxeles de la parte inferior:

pag {
posición: relativa;
abajo: 10px;
}

Cambiar la posición de un elemento a relativa no lo elimina del flujo normal; otros elementos a su alrededor todavía se comportan como si ese elemento estuviera en su posición predeterminada. Nota
El posicionamiento le brinda mucha flexibilidad y poder sobre el diseño visual de una página. Es bueno recordar que no importa la posición de los elementos, el marcado HTML subyacente debe estar organizado y tener sentido cuando se lee de arriba a abajo. Así es como los usuarios con discapacidades visuales (que dependen de dispositivos de asistencia como lectores de pantalla) acceden a su contenido.

Instructions

Cambie la position del h2 a relative , y use un desplazamiento de CSS para alejarlo 15 píxeles de la top de donde se encuentra en el flujo normal. Observe que no hay impacto en las posiciones de los elementos h1 yp circundantes.

Tests

tests:
  - text: El elemento <code>h2</code> debe tener una propiedad de <code>position</code> establecida en <code>relative</code> .
    testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");'
  - text: Su código debe usar un desplazamiento de CSS para colocar relativamente el <code>h2</code> 15px lejos de la <code>top</code> de donde normalmente se encuentra.
    testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");'

Challenge Seed

<style>
  h2 {


  }
</style>
<body>
  <h1>On Being Well-Positioned</h1>
  <h2>Move me!</h2>
  <p>I still think the h2 is where it normally sits.</p>
</body>

Solution

// solution required

3.3 KiB Raw Blame History