Top CSS

La parte superior se describe como el punto superior. En CSS, tenemos la propiedad superior que utilizamos para establecer la posición superior del elemento. Cuando establecemos cualquier valor en esta propiedad "superior", la posición del elemento se establecerá de acuerdo con el valor dado. Establece el valor desde la parte superior de la página. Solo afecta la posición vertical del elemento. Podemos establecer el valor de esta propiedad superior en "PX", "EM" o también "%". Cuando queremos establecer algunos elementos de la parte superior en la dirección vertical, entonces usamos esta propiedad "superior" en CSS. En esta guía, utilizaremos esta propiedad "superior" en CSS y estableceremos la posición de los elementos. Proporcionaremos algunos ejemplos en los que usamos esta propiedad "superior" y le mostraremos cómo afecta la posición del elemento.

Ejemplo 1:

Para aplicar esta propiedad, debemos tener algunos elementos. Entonces, primero, creamos algunos elementos en HTML. Para hacer un archivo HTML, tenemos que abrir un nuevo archivo. Visual Studio Code es el software que utilizaremos. Comenzaremos a codificar en este archivo. También escribimos "!"Y luego haga clic en" Enter "para recuperar las etiquetas básicas HTML, que se requieren en todos los códigos HTML. Después de todo esto, tenemos que escribir el cuerpo en el que vamos a escribir algunos párrafos al lado del encabezado. Estamos estableciendo diferentes nombres para cada párrafo, por lo que utilizaremos estos nombres cuando apliquemos la propiedad "superior" en estos párrafos. Aquí, tenemos cuatro párrafos con el nombre "P1", "P2", "P3" y "P4" y cambiaremos su posición superior utilizando la propiedad superior en CSS.

Primero, tenemos tipo ". P1 "que representa el primer párrafo. Establecemos su "posición" como "absoluta". Luego, vamos a establecer su posición desde la parte superior con la ayuda de la propiedad "superior". En este ejemplo, estamos utilizando "%" con el valor de la propiedad "superior". Establecemos el valor de la propiedad superior del primer párrafo como "10%". Además, establece su "color" en "rojo" y "16px" para el "tamaño de fuente". Ahora tenemos el segundo párrafo "P2". Su "posición" también es "absoluta" y establecemos el valor de la propiedad "superior" del segundo párrafo como "25%". Su "color" de la fuente es "verde" y "tamaño de fuente" es "18px". Luego, la "posición" del tercer párrafo es nuevamente "absoluta" y el "superior" es "40%". El párrafo "color" es "azul" y "20px" es el "tamaño de fuente". Para el párrafo "P4", vamos a establecer "70%" como la fuente "Top" y "Purple" "Color" y "Font-Size" es "22px" para este cuarto párrafo.

Puede ver que la posición superior de todos los párrafos es diferente, ya que hemos establecido estas posiciones superiores en este ejemplo. El primer párrafo aparece como "10%" desde la parte superior de la página, ya que hemos establecido "10%" en la propiedad "superior". El otro aparece exactamente en la misma posición superior que hemos establecido en el código CSS.

Ejemplo # 2:

En este ejemplo, estamos utilizando dos elementos DIV de diferentes nombres como "B" y "C" dentro de otro Div "A". También tenemos un encabezado antes de estos elementos Div. Ahora, aplicaremos la propiedad "superior" a estos elementos Div.

El "div. A "es el Div principal que hemos creado en el HTML y estamos estableciendo la" posición "de este div como" pariente ". Luego, estamos utilizando las propiedades de "ancho" y "altura" y establecemos "400px" y "200px" para estos respectivamente. Estamos creando la frontera para este div mediante el uso de la propiedad "fronteriza". La propiedad de ancho y altura anterior está aquí para establecer el ancho y la altura del borde del div. El "borde" que estamos configurando es "3px" en su ancho y el "rojo" en el "color" del tipo "sólido". También tenemos "div. B "y vamos a establecer la" posición "de esta" div. B "que está presente dentro del primer div y lo establece como" absoluto "y su" superior "es" 0 ". Estamos creando una frontera alrededor de este div mediante el uso de la propiedad "fronteriza". Este borde está en el color "azul" del tipo "3px" y "sólido"."

Después de esto, nos estamos mudando a nuestro último div, que es "div. C". Nuevamente establecemos su "posición" en "Absoluto", pero su "arriba" es "100px". En este ejemplo, estamos usando "PX" para establecer la "parte superior" del tercer div. Su borde se establece como "verde" y el "color de fondo" se establece aquí como "verde claro".

Puede notar que no hay espacio entre las fronteras del primer div y el segundo div porque establecemos la parte superior del segundo div como "0". El tercer div se establece como "100px" para que pueda ver en la salida cómo aparece. Aparece en "100px" debajo del borde superior del primer div.

Ejemplo # 3:

Aquí tenemos un encabezado y luego el contenedor Div principal. Dentro de este Div principal, también tenemos otros tres contenedores DIV. Todos estos contenedores Div son de diferentes nombres, por lo que estableceremos diferentes valores superiores para todos los contenedores DIV.

Primero, mencionamos el nombre de ese div que queremos diseñar. Entonces, ponemos el nombre del primer div y luego diseñamos este DIV usando la propiedad de "posición". Luego, configurando su valor utilizando la palabra clave "relativa". Establecemos su "superior" en "00px" y el "ancho" y la "altura" que estamos configurando aquí es "400px" y "350px" respectivamente. Vamos a configurar su "borde" en "2px" y "sólido" en color "negro". La segunda "posición" Div que estamos configurando aquí es "absoluto" y el valor de la "superior" es "50px" y el "borde" es de color "rojo". La "posición" del tercer div se establece en "absoluto". El valor "superior" es "150px" para el tercer div y el color "borde" es "azul".

Entonces, aparece div y otra vez "posición" es "absoluta". Valor superior "200px" y "verde" para el "borde". Todos los bordes que estamos usando en este código están en tipo "sólido" y también en ancho "2px".

La salida le muestra la posición superior de todos los contenedores Div. Todos los elementos Div aparecen en una posición diferente de la parte superior del primer div. Todo esto se debe a la propiedad "superior" que hemos utilizado en el código CSS.

Ejemplo # 4:

Tenemos un encabezado, luego el elemento Div principal y tres elementos DIV más dentro del elemento Div principal. Usamos diferentes nombres para todos los elementos Div. Entonces, usaremos valores superiores separados para cada uno de ellos.

Establecimos la altura principal de Div Div1 como "300px" y su "color de fondo" es "blanco". Luego, nos estamos moviendo a los otros elementos Div que están presentes dentro de este Div principal. Estamos estableciendo el valor de la propiedad "superior" de estos divs en "EM". Establecimos el segundo div "top" como "5em". El tercer Div "Top" es "10em" y el último valor de "Top" Div es "20EM".

En esta salida, dentro del primer div, el segundo elemento Div se representa en "5em" desde la "parte superior", el tercer Div se representa en "10em" desde la "parte superior", y también el tercer DIV se representa en "20em "Desde la parte superior, ya que hemos usado la propiedad" superior "aquí en nuestro código CSS.

Conclusión:

Esta guía ha explicado cómo usar la propiedad "superior" de CSS. Hemos pasado por lo que es la mejor propiedad y cómo configurarla en CSS. La propiedad "superior" se usa aquí para establecer la posición de los elementos desde la parte superior y hemos usado "PX", "EM" y "%" para establecer el valor de la propiedad "superior". Hemos presentado múltiples ejemplos en esta guía y también. Hemos pegado todas las capturas de pantalla de los códigos, así como la salida aquí. Utilizará esta propiedad "superior" en sus códigos después de estudiar a fondo esta guía.