--- id: 587d781e367417b2b2512ac9 title: Change an Element's Relative Position challengeType: 0 videoUrl: '' localeTitle: 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
```yml tests: - text: El elemento h2 debe tener una propiedad de position establecida en relative . testString: 'assert($("h2").css("position") == "relative", "The h2 element should have a position property set to relative.");' - text: Su código debe usar un desplazamiento de CSS para colocar relativamente el h2 15px lejos de la top de donde normalmente se encuentra. testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.");' ```
## Challenge Seed
```html

On Being Well-Positioned

Move me!

I still think the h2 is where it normally sits.

```
## Solution
```js // solution required ```