Saltar al contenido principal
Codigo Heroe
Desafío anterior
Posicionamiento por anclaje #15/15
Ver desafíos del nivel
  1. 1. Declaración de un ancla I
  2. 2. Declaración de un ancla II
  3. 3. Vinculación con un ancla I
  4. 4. Vinculación con un ancla II
  5. 5. Nombres de las anclas I
  6. 6. Nombres de las anclas II
  7. 7. Selección de un ancla I
  8. 8. Selección de un ancla II
  9. 9. Área de posicionamiento I
  10. 10. Área de posicionamiento II
  11. 11. Lado de posicionamiento I
  12. 12. Lado de posicionamiento II
  13. 13. Posicionamiento por anclaje I
  14. 14. Posicionamiento por anclaje II
  15. 15. Posicionamiento por anclaje III
Siguiente desafío
  • Skill Atlas

Cargando…
Estará listo en unos segundos.

  • Desafío

Nombres de las anclas I

Replica el ejemplo modificando el código
DificultadMedia
CategoríaHTML/CSS
Ahora
Estado actual de la página
Ejemplo
Resultado que debes obtener
ResultadoAparecerá después de la primera comprobaciónAparecerá después
  • index.html
  • style.css
HTML
CSS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Desafío</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-5.css"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="stage"> <div class="work-field"> <div class="anchor anchor--one"><span class="anchor-label"></span></div> <div class="anchor anchor--two"><span class="anchor-label"></span></div> </div> <div class="parts-field"> <div class="parts-field-cell"> <div class="ship target target--one ship--one"></div> </div> <div class="parts-field-cell"> <div class="ship target target--two ship--two"></div> </div> </div> </main> </body> </html>
.anchor--one { anchor-name: {{anchorName}}; } .anchor--two { anchor-name: {{anchorName2}}; } .target--one { position: absolute; position-anchor: --a1; } .target--two { position: absolute; position-anchor: --a2; }
-2
Vista previa

El código cambió. Haz clic en «Actualizar» o activa la ejecución automática.

Saliste de la página del desafío.

Haz clic dentro de la vista previa para enfocar esta ventana.

100%
0
    Completado 0%.

    Desafío completado

    Movimientos adicionales
    Continuar
    Codigo Heroe

    © 2023-2026, codigoheroe.com