Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS - Superposición - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 22 de febrero de 2021 por Fernando M.

122 visualizaciones

Más información Transcripción

Descargar la transcripción

Vale, pues ahora vamos a ver cómo superposicionar diferentes elementos. Esto va a ser muy sencillo. Como siempre, nos vamos a ir a brackets y aquí lo que vamos a hacer es borrar todo el contenido y todos los estilos hasta ahí. 00:00:01
y aquí borramos hasta ahí 00:00:22
vale 00:00:27
perdón, antes de borrarlo 00:00:27
no seáis bestias y 00:00:32
guardar el archivo como y lo vamos a 00:00:34
llamar superposición 00:00:36
punto html 00:00:38
vale 00:00:40
y ahora una vez que ya si que lo tenéis guardado si que lo podéis borrar 00:00:41
eso es 00:00:44
vale 00:00:48
vamos a llamar a esto 00:00:48
superposición 00:00:51
con css 00:00:52
y lo que vamos a hacer 00:00:54
vamos a crear primero el contenido 00:00:58
vamos a poner un título h1 00:01:00
que sea superposición 00:01:02
con css 00:01:04
y nos vamos a crear 00:01:05
tres cajas dip 00:01:07
tres contenedores 00:01:10
con el campo id vacío 00:01:10
para eso 00:01:14
aquí el atajo emet 00:01:15
que va a ser dip 00:01:17
ponemos id entre dentro 00:01:19
porque vamos a dejar el hueco de id vacío para que lo rellene yo manualmente 00:01:23
y por 3, porque vamos a poner 3 cajitas 00:01:28
pues entonces div id por 3 tabulador 00:01:31
y como vamos a poner cajitas de colores pues van a ser verde, rojo y azul 00:01:37
pues vamos a empezar a darle estilo a esto 00:01:44
nos vamos a poner 00:01:50
y lo primero que vamos a darle estilo son 00:01:53
a todos los dip en general, ¿vale? 00:01:54
por eso ponemos la etiqueta dip 00:01:56
le vamos a dar una anchura 00:01:58
que va a ser de 400 píxeles 00:02:00
le vamos a dar 00:02:03
una altura 00:02:05
que van a ser de 180 píxeles 00:02:06
le vamos a poner 00:02:09
una posición que va a ser relativa 00:02:10
¿vale? para que los elementos se posicionen 00:02:13
de forma relativa respecto de la 00:02:15
de la página 00:02:17
¿Vale? Y ahora vamos a modificar cada elemento de forma individual, ¿vale? Vamos a modificar primero el verde, que como es verde, pues le vamos a dar un color de fondo verde, ¿vale? 008800, ¿vale? Que es un color verde así oscurillo. 00:02:19
Y lo que vamos a hacer es posicionarlo, ¿vale? 00:02:40
Ponemos una posición desde la parte izquierda de 139 píxeles y desde arriba de 144 píxeles, ¿vale? 00:02:50
Vamos a hacer algo similar para el rojo, le vamos a dar un color de fondo. 00:03:02
En este caso, DFF0000, lo vamos a poner desde la izquierda a 180 píxeles y desde arriba a, y sin ponerle valor de arriba, ¿vale? 00:03:07
Y por último vamos a hacer el azul, que le vamos a dar un color de fondo que sea 0000FF, ¿vale? 00:03:25
Desde la izquierda lo vamos a posicionar a 215 píxeles y desde abajo a 153 píxeles, ¿vale? 00:03:38
¿Vale? Entonces, si os dais cuenta, vemos cómo van saliendo superpuestas unas cajas respecto de las otras, ¿vale? ¿Qué ocurre con esto? Pues que yo puede ser que decida que la caja que yo quiero que salga adelante sea la verde en lugar de la roja, o la roja en lugar del resto, ¿vale? 00:03:48
Entonces, para eso se utiliza una propiedad que se llama z-índex, ¿vale? 00:04:08
Z-índex, lo voy a poner justo aquí arriba, ¿vale? 00:04:16
Para hacer superposición, z-índex. 00:04:24
Cuanto mayor sea el valor del z-índex, más arriba se verá, ¿vale? 00:04:33
Entonces, fijaros, voy a ponerle z-index a todos los elementos, ¿vale? Voy a ponerle a este un z-index de 1 y lo voy a copiar y lo voy a poner en todos, ¿vale? 00:04:40
Tal que así, ¿vale? Ahora mismo todos tienen el mismo z-index. Si os dais cuenta, al ponerle a todos el mismo z-index no ha habido ningún cambio, ¿vale? 00:04:59
Si yo ahora le pongo al verde un z-index de 5, fijaros que el verde pasa a estar delante, ¿vale? Luego estaría el azul y luego el rojo. Si yo ahora al rojo le pongo un 2, fijaros que el rojo pasa a estar delante del azul. 00:05:07
Y si yo incluso al rojo le pongo ahora un 10, pasa a estar delante del verde, ¿vale? 00:05:24
¿Qué pasa? Que tal y como está la disposición de estas cajas, no llego a saber si el verde está delante del azul o no, ¿vale? 00:05:30
Pero si yo ahora de nuevo al azul le doy un 15, pues fijaros que el azul pasa a estar delante, ¿vale? 00:05:36
Entonces ya digo, propiedad Z index para moverse o para jugar con ese superposicionamiento de los diferentes elementos, ¿vale? 00:05:44
Pues como digo, esto también lo utilizaremos bastante. 00:05:54
¡Ánimo! 00:06:01
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
122
Fecha:
22 de febrero de 2021 - 21:40
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
06′ 02″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
15.35 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid