Cambiar texto usando CSS

Jay Singh 20 febrero 2023

CSS CSS Shift

Desplazar texto usando posicionamiento relativo en CSS
Desplazar texto usando posicionamiento absoluto en CSS

CSS ayuda al posicionamiento de elementos HTML. Cualquier elemento HTML se puede colocar en cualquier lugar de la página.

Puede elegir si el elemento debe colocarse en relación con la posición natural de la página o absoluto con respecto a su elemento principal. Ahora puede mover su texto por la página como mejor le parezca.

Con la propiedad de posición y los dos valores superior e izquierdo, puede mover un elemento de texto HTML a cualquier parte de la página.

Si tiene que mover el texto a la izquierda, utiliza un valor negativo para left.
Si tienes que mover el texto a la derecha, utiliza un valor positivo para left.
Si tiene que mover el texto hacia arriba, utilice un valor negativo para el top.
Si tiene que mover el texto hacia abajo, utilice un valor positivo para el top.

Desplazar texto usando posicionamiento relativo en CSS

En este ejemplo, el posicionamiento relativo cambia la posición del elemento de texto en relación con el lugar donde normalmente se muestra. Con el aumento o la reducción del valor, puede desplazar el elemento de texto.

<html>
    <head>
    </head>
    <body>
        <div style = "position:relative; left:80px; top:20px; background-color:yellow;">
            Hello! I am DelftStack.
        </div>
    </body>
</html>

Desplazar texto usando posicionamiento absoluto en CSS

Con position: absolute, las coordenadas de un elemento son relativas a la esquina superior izquierda de la pantalla.

<html>
    <head>
    </head>
    <body>
        <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
            Hello! I am DelftStack.
        </div>
    </body>
</html>