Posiciones
FPB 2 PROF Daniel Torres Viñolo
Posiciones
Para mover nuestros bloques (<div></div>), podemos usar la propiedad de css “position”
● Posición relativa ⇒ position:relative;
El posicionamiento relativo desplaza una caja respecto de su posición original establecida
mediante el posicionamiento normal.
El desplazamiento relativo de una caja no afecta al resto de cajas adyacentes, es decir, el resto
de cajas NO varían su posición y por tanto no ocupan el hueco dejado por la primera.
Para mover nuestros bloques, después de poner una position:relative; usaremos las
propiedades top:””;(arriba), left:””;(izquierda); right:””(derecha); bottom:””;(abajo);
Ejercicio 1: position relative
En este primer ejercicio, tenéis que dar estilos de tal forma que se
quede lo más parecido posible a la imagen de la derecha.
<body>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</body>
NOTAS:
● Dentro del <body></body>, solo habrá el código que
aparece justo encima.
● Poner todas las etiquetas para que vuestra página
funcione: <!DOCTYPE, <html>,<head>,etc…
● Nombre y apellido al final de la página.
● Usar el id de cada div, para dar estilos diferentes a cada
uno.
● Usar las propiedades: position, top, left,right,etc…..
Posiciones
● Posición absoluta⇒ position:absolute;
En posicionamiento absoluto se emplea para establecer de forma exacta la posición en la que
se muestra un elemento. Cuándo un elemento se posiciona de forma absoluta el resto de
elementos se ven afectados y modifican su posición ocupando el hueco que dejó éste.
Si su padre no está posicionado de forma relative, absolute o fixed, la referencia de
movimiento es el documento.
Para poner un bloque en una capa inferior o superior usaremos ⇒ z-index:1; (pondremos el
número que corresponda)
Ejercicio 2: position absolute
Tenéis que dar estilos de tal forma que se quede lo más <body>
parecido posible a la imagen. <div id="a">A</div>
<div id="b">B</div>
NOTAS: <div id="c">C</div>
● Dentro del <body></body>, solo habrá el código que </body>
aparece a la derecha.
● Poner todas las etiquetas para que vuestra
página funcione: <!DOCTYPE,
<html>,<head>,etc…
● Nombre y apellido al final de la página.
● Usar el id de cada div, para dar estilos
diferentes a cada uno.
● Usar las propiedades: position, top, left,z-
index,etc...
Posiciones
● Posición fija ⇒ position:fixed;
El posicionamiento fixed se emplea para establecer de forma exacta la posición en la que se
muestra un elemento.
Cuándo un elemento se posiciona de forma fixed el resto de elementos se ven afectados y
modifican su posición ocupando el hueco que dejo éste. La referencia de sus coordenadas van
con respecto a la ventana.
Para poner un bloque en una capa inferior o superior usaremos ⇒ z-index:1; (pondremos el
número que corresponda)
Ejercicio 3: position fixed
En las siguientes diapositivas, tenéis el código que corresponde al <body>, y la imagen del resultado final, una
vez le hayáis dado estilos.
NOTAS:
● Dentro del <body></body>, solo habrá el código de la siguiente diapositiva.
● Poner todas las etiquetas para que vuestra página funcione: <!DOCTYPE, <html>,<head>,etc…
● Nombre y apellido al final de la página.
Ejercicio 3: position fixed - código <body>
<body>
<header>
<h1>positionFixed</h1>
</header>
<main>
<h2>Titular</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros
bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus
vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id
tincidunt sapien risus a quam. Maecenas fermentum consequat mi.</p>
<p>Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In
convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse
platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non
feugiat orci magna ac sem. Donec turpis. Donec vitae metus. </p>
</main>
</body>
Ejercicio 3: position fixed - resultado
Posiciones
● Z-index:
Además de posicionar una caja de forma horizontal o vertical, CSS permite controlar la posición
tridimensional de las cajas posicionadas, es decir, sobre el eje Z.
De esta forma, es posible indicar las cajas que se muestran delante o detrás de otras cuando se
producen solapamientos. Cuánto más alto sea el valor numérico, más cerca del usuario se
muestra de la caja.
Ejercicio 4: z-index
Tenéis que dar estilos de tal forma que se quede lo más parecido <body>
posible a la imagen. <div class="carta uno">1</div>
<div class="carta dos">2</div>
NOTAS: <div class="carta tres">3</div>
● Dentro del <body></body>, solo habrá el código que aparece <div class="carta cuatro">4</div>
a la derecha. </body>
● Poner todas las etiquetas para que vuestra página
funcione: <!DOCTYPE, <html>, <head>, etc…
● Nombre y apellido al final de la página.
● Usar el id de cada div, para dar estilos diferentes a cada
uno.
● Usar las propiedades: position, top, left, z-index,etc…
● Hay dos opciones de fondo transparente:
○ background-color: rgba(valores del color, .4), el
último valor corresponde a la opacidad.
○ opacity:(el valor va de 0 a 1 );