Propiedad position CSS: static, relative, absolute, fixed. Top, right, bottom, left. Ejemplos prácticos (CU01032D)
Aquí están las tres actividades:
1) Define un documento HTML con un div padre (divPadre), dentro del cual existan otras 3 cajas contenedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 píxeles de margin en todas direcciones, 30 píxeles de padding en todas direcciones y un background color diferente. Usando posicionamiento relativo genera un desplazamiento de los div de la siguiente manera:
a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia abajo respecto a lo que sería su posición normal.
b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia arriba respecto a lo que sería su posición normal.
c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia arriba respecto a lo que sería su posición normal.
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Primer ejercicio de posición</title>
<link rel="stylesheet" type="text/css" href="1position.css">
</head>
<body>
<div id="padre">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
Código CSS
/*Para los div de padre*/
#padre div{width: 300px; height: 300px;
margin: 40px; padding: 30px;
position: relative;
border: 2px solid #000;}
/*Caracteristicas individuales*/
#div1{background-color: #FF0000;
left: 200px; top: 100px;}
#div2{background-color: #008000;
right: 50px; bottom: 50px;}
#div3{background-color: #0000FF;
left: 450px; bottom: 300px;}
2) Define un documento HTML con 3 cajas contenedoras div (div1, div2 y div3), la primera con unas dimensiones de 600x600px y un background color amarillo. La segunda con dimensiones 400x400px y un background color verde. La tercera con dimensiones 100x100px y background color azul. Usando posicionamiento absoluto establece para el div2 y el div3 el mismo origen que para el div1, de modo que el efecto generado sea ver un cuadrado amarillo dentro del cual hay un cuadrado verde dentro del cual hay un cuadrado azul.
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Segundo ejercicio de posición</title>
<link rel="stylesheet" type="text/css" href="2position.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
Código CSS
/*Caracteristicas generales para div*/
div{position: absolute;}
/*Los diferentes div*/
#div1{width: 600px; height: 600px; background-color: #FFFF00;}
#div2{width: 400px; height: 400px; background-color: #00FF00;
left: 100px; top: 100px;}
#div3{width: 100px; height: 100px; background-color: #0000FF;
left: 250px; top: 250px;}
3) Define un documento HTML con varios div que contengan suficiente texto como para que la página se muestre con scroll (barras de desplazamiento). El primero de los div debe contener el texto <<Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.>>, un valor height (altura) de 100 píxeles y color de fondo amarillo. Usando posicionamiento fixed, fija este div en la parte superior de la página de modo que se continúe visualizando aún cuando hagamos scroll.
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tercer ejercicio de posición</title>
<link rel="stylesheet" type="text/css" href="3position.css">
</head>
<body>
<div id="cookie">
<div><br>Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.</div>
</div>
<div id="page">
<center><img src="http://www.hobbyconsolas.com/sites/hobbyconsolas.com/public/media/image/2015/09/520068-nintendo-126-anos-historia-traves-su-logo.png" alt="nintendo" width="45%" height="100px"></center>
<p><b>NINTENDO</b> Es una empresa multinacional dedicada al mercado de los videojuegos y a la electrónica de consumo; con sede en Kioto, Japón. Fue fundada el 23 de septiembre de 1889, por el japonés Fusajiro Yamauchi.</p>
<p>Uno de los videojuegos mas destacados son:</p>
<ul>
<li>Super Mario bros.</li>
<li>Donkey kong</li>
<li>The Legend of Zelda</li>
<li>Metroid</li>
<li>EarthBound</li>
<li>Fire Emblem</li>
<li>Pokemon</li>
<li>Animal Crossing</li>
<li>Kirby</li>
<li>Luigi's Mansion</li>
<li>Star Fox</li>
<li>F-Zero</li>
<li>Splatoon</li>
</ul>
<p>Estos fueron evolucionando al pasar de los años. Pasando de consola en consola, entre estos están:</p>
<ul>
<li>Nintendo Entreteinement System</li>
<li>Super Nintendo Entreteinement System</li>
<li>Nintendo 64</li>
<li>Game Cube</li>
<li>Wii</li>
<li>Wii U</li>
<li>NX (proximamente)</li>
</ul>
<p>Sin olvidar las multiples consolas portatiles:</p>
<ul>
<li>GameBoy</li>
<li>GameBoy Pocket</li>
<li>GameBoy Light</li>
<li>GameBoy Color</li>
<li>GameBoy Advance</li>
<li>Nintendo DS</li>
<li>Nintendo DS Lite</li>
<li>Nintendo DS<sup>i</sup></li>
<li>Nintendo DS<sup>i</sup> XL</li>
<li>Nintendo 3DS</li>
<li>Nintendo 3DS XL</li>
<li>New Nintendo 3DS</li>
<li>New Nintendo 3DS XL</li>
</ul>
<p>Nintendo también lleva un sistema online llamado Miiverse. Se trata de la primera red social de Nintendo, donde sus usuarios pueden chatear entre sí en forma de Miis, además de compartir logros en videojuegos y formar comunidades virtuales.</p>
</div>
</body>
</html>
Código CSS
/*DATOS GENERALES*/
*{font-family: arial}
body{margin: 0;}
/*Aviso de Cookies*/
#cookie div{background-color: #FF0; font-weight: bold; font-size: 1.5em;
text-align: center; height: 100px; position: fixed; left: 25%; width: 50%}
/*Tamaño de imagenes*/
img{margin: 100px 0 0 0;}
/*Caracteristicas de page*/
#page{width: 50%; background-color: #CCC; margin: auto;}
/*Parrafos dentro de page*/
#page p{margin-left: 15%; margin-right: 15%; text-align: justify;
font-size: 1.2em;}
/*Listas dentro de page*/
#page ul{list-style-type: disc; margin: 0 15% 0 15%; font-size: 1.2em}
/*FIN page*/
Tema: HTML y CSS Propiedad position, top, right, bottom, left. Ejercicios CU01032D (Leído 2310 veces)
RSS -
WAP2