Autor Tema: Propiedad position CSS: qué significa static, relative, absolute, fixed CU01032D (Leído 2162 veces)

HumbertoAli · « **en:** 31 de Mayo 2017, 03:59 »

Aca mis respuestas a los siguientes ejercicios de la entrega CU01032D del curso fundamental de desarrollo web con CSS usando Notepad++ como editor, si pueden corregirme me seria de ayuda:

Citar

EJERCICIO 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.

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

EJERCICIO 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. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

EJERCICIO 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. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Respuesta Ejercicio 1:
html:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
		<link href="estilosPosicion1.css" type="text/css" rel="stylesheet">
    </head>
	<body>
		<div>
			<div class="contenedores" id="uno">
	        </div>
			<div class="contenedores" id="dos">
	        </div>
			<div class="contenedores" id="tres">
	        </div>
		</div>
	</body>
</html>

css

Código: [Seleccionar]

div {
	border: solid;
	position: relative;
}
.contenedores {
	width: 300px;
	height: 300px;
	padding: 30px;
	margin: 40px;
}
#uno {
	background-color: orange;
	left: 200px;
	top: 100px;
}
#dos {
	background-color: green;
	right: 50px;
	bottom: 50px;
}
#tres {
	background-color: pink;
	left: 450px;
	bottom: 300px;
}

Respuesta ejercicio 2:
html

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
		<link href="estilosPosicion2.css" type="text/css" rel="stylesheet">
    </head>
	<body>
		<div id="div1">
		</div>
		<div id="div2">
		</div>
		<div id="div3">
		</div>
	</body>
</html>

css:

Código: [Seleccionar]

div {
	position: absolute;
}

#div1 {
	width: 600px;
	height: 600px;
	background-color: yellow;
}

#div2 {
	width: 400px;
	height: 400px;
	background-color: green;
}

#div3 {
	width: 100px;
	height: 100px;
	background-color: blue;
}

Respuesta ejercicio 3:

html

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Ejemplo del uso de formularios - aprenderaprogramar.com</title>
		<link href="estilosPosicion3.css" type="text/css" rel="stylesheet">
    </head>
	<body>
		<div id="div1">
			<p>Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.</p>
		</div>
		<div id="div2">
			<p>El código #menu1 { position:absolute; } equivale a #menu1 { position:absolute; left: auto; top: auto; } lo que supone que  se toma como origen de coordenadas el del elemento padre. De ahí que en la imagen de la izquierda se vea la caja en su posición natural, pero al estar posicionada de forma absoluta es ignorada por el resto de elementos y su espacio es ocupado como si no estuviera ahí.

El código #menu1 { position:absolute; left:0; top:0; } significa que el origen de coordenadas será el del primer contenedor posicionado o, si no existe, la esquina superior izquierda de la ventana de visualización. En este caso se toma la esquina superior izquierda de la ventana como origen de coordenadas.

Cuando se establece position en absolute o fixed el ancho del bloque se ajusta al contenido (excepto si está establecido específicamente mediante la propiedad width).

Prueba a cambiar los valores de left y top y comprueba sus resultados. Por ejemplo si estableces valores left: -50px; top: -50px; verás cómo la caja “se sale de la pantalla” por la esquina superior izquierda. Si estableces right:0; top:0; verás que la caja se sitúa en la parte superior derecha de la pantalla.

Supón ahora que quieres usar como origen de coordenadas absolutas la esquina superior izquierda del div contenedor del que estamos usando como ejemplo. Ese div contenedor tiene, aparte del menú, varias cosas más como texto con imágenes y un formulario.

Para hacer que el div del menú tome para origen de coordenadas el div contenedor en lugar de la esquina superior izquierda de la pantalla hemos de posicionar el contenedor. Posicionarlo significa darle un valor de position distinto del valor por defecto (static). Esto podemos hacerlo de varias maneras. Por ejemplo podríamos poner un id al div contenedor y aplicarle una regla nombreEscogido {position: relative; }. No es necesario establecer un desplazamiento ya que nosotros ahora lo único que queremos es que dicho elemento se identifique como un elemento posicionado, y para ello establecer su propiedad position como relative es suficiente.

También podemos hacerlo como vemos en este código:</p>
		</div>
		<div id="div3">
			<p>El código #menu1 { position:absolute; } equivale a #menu1 { position:absolute; left: auto; top: auto; } lo que supone que  se toma como origen de coordenadas el del elemento padre. De ahí que en la imagen de la izquierda se vea la caja en su posición natural, pero al estar posicionada de forma absoluta es ignorada por el resto de elementos y su espacio es ocupado como si no estuviera ahí.

El código #menu1 { position:absolute; left:0; top:0; } significa que el origen de coordenadas será el del primer contenedor posicionado o, si no existe, la esquina superior izquierda de la ventana de visualización. En este caso se toma la esquina superior izquierda de la ventana como origen de coordenadas.

Cuando se establece position en absolute o fixed el ancho del bloque se ajusta al contenido (excepto si está establecido específicamente mediante la propiedad width).

Prueba a cambiar los valores de left y top y comprueba sus resultados. Por ejemplo si estableces valores left: -50px; top: -50px; verás cómo la caja “se sale de la pantalla” por la esquina superior izquierda. Si estableces right:0; top:0; verás que la caja se sitúa en la parte superior derecha de la pantalla.

Supón ahora que quieres usar como origen de coordenadas absolutas la esquina superior izquierda del div contenedor del que estamos usando como ejemplo. Ese div contenedor tiene, aparte del menú, varias cosas más como texto con imágenes y un formulario.

Para hacer que el div del menú tome para origen de coordenadas el div contenedor en lugar de la esquina superior izquierda de la pantalla hemos de posicionar el contenedor. Posicionarlo significa darle un valor de position distinto del valor por defecto (static). Esto podemos hacerlo de varias maneras. Por ejemplo podríamos poner un id al div contenedor y aplicarle una regla nombreEscogido {position: relative; }. No es necesario establecer un desplazamiento ya que nosotros ahora lo único que queremos es que dicho elemento se identifique como un elemento posicionado, y para ello establecer su propiedad position como relative es suficiente.

También podemos hacerlo como vemos en este código:</p>
<div id="div2">
			<p>El código #menu1 { position:absolute; } equivale a #menu1 { position:absolute; left: auto; top: auto; } lo que supone que  se toma como origen de coordenadas el del elemento padre. De ahí que en la imagen de la izquierda se vea la caja en su posición natural, pero al estar posicionada de forma absoluta es ignorada por el resto de elementos y su espacio es ocupado como si no estuviera ahí.

El código #menu1 { position:absolute; left:0; top:0; } significa que el origen de coordenadas será el del primer contenedor posicionado o, si no existe, la esquina superior izquierda de la ventana de visualización. En este caso se toma la esquina superior izquierda de la ventana como origen de coordenadas.

Cuando se establece position en absolute o fixed el ancho del bloque se ajusta al contenido (excepto si está establecido específicamente mediante la propiedad width).

Prueba a cambiar los valores de left y top y comprueba sus resultados. Por ejemplo si estableces valores left: -50px; top: -50px; verás cómo la caja “se sale de la pantalla” por la esquina superior izquierda. Si estableces right:0; top:0; verás que la caja se sitúa en la parte superior derecha de la pantalla.

Supón ahora que quieres usar como origen de coordenadas absolutas la esquina superior izquierda del div contenedor del que estamos usando como ejemplo. Ese div contenedor tiene, aparte del menú, varias cosas más como texto con imágenes y un formulario.

Para hacer que el div del menú tome para origen de coordenadas el div contenedor en lugar de la esquina superior izquierda de la pantalla hemos de posicionar el contenedor. Posicionarlo significa darle un valor de position distinto del valor por defecto (static). Esto podemos hacerlo de varias maneras. Por ejemplo podríamos poner un id al div contenedor y aplicarle una regla nombreEscogido {position: relative; }. No es necesario establecer un desplazamiento ya que nosotros ahora lo único que queremos es que dicho elemento se identifique como un elemento posicionado, y para ello establecer su propiedad position como relative es suficiente.

También podemos hacerlo como vemos en este código:</p>
		</div>
		<div id="div4">
			<p>El código #menu1 { position:absolute; } equivale a #menu1 { position:absolute; left: auto; top: auto; } lo que supone que  se toma como origen de coordenadas el del elemento padre. De ahí que en la imagen de la izquierda se vea la caja en su posición natural, pero al estar posicionada de forma absoluta es ignorada por el resto de elementos y su espacio es ocupado como si no estuviera ahí.

El código #menu1 { position:absolute; left:0; top:0; } significa que el origen de coordenadas será el del primer contenedor posicionado o, si no existe, la esquina superior izquierda de la ventana de visualización. En este caso se toma la esquina superior izquierda de la ventana como origen de coordenadas.

Cuando se establece position en absolute o fixed el ancho del bloque se ajusta al contenido (excepto si está establecido específicamente mediante la propiedad width).

Prueba a cambiar los valores de left y top y comprueba sus resultados. Por ejemplo si estableces valores left: -50px; top: -50px; verás cómo la caja “se sale de la pantalla” por la esquina superior izquierda. Si estableces right:0; top:0; verás que la caja se sitúa en la parte superior derecha de la pantalla.

Supón ahora que quieres usar como origen de coordenadas absolutas la esquina superior izquierda del div contenedor del que estamos usando como ejemplo. Ese div contenedor tiene, aparte del menú, varias cosas más como texto con imágenes y un formulario.

Para hacer que el div del menú tome para origen de coordenadas el div contenedor en lugar de la esquina superior izquierda de la pantalla hemos de posicionar el contenedor. Posicionarlo significa darle un valor de position distinto del valor por defecto (static). Esto podemos hacerlo de varias maneras. Por ejemplo podríamos poner un id al div contenedor y aplicarle una regla nombreEscogido {position: relative; }. No es necesario establecer un desplazamiento ya que nosotros ahora lo único que queremos es que dicho elemento se identifique como un elemento posicionado, y para ello establecer su propiedad position como relative es suficiente.

También podemos hacerlo como vemos en este código:</p>
		</div>
		</div>
	</body>
</html>

css:

Código: [Seleccionar]

#div1 {
	height: 100px;
	background-color: yellow;
	position: fixed;
	top: 0;
	left: 0;
}

pedro,, · « **Respuesta #1 en:** 07 de Junio 2017, 08:56 »

Hola HumbertoAli.

El ejercicio es correcto.

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Propiedad position CSS: qué significa static, relative, absolute, fixed CU01032D (Leído 2162 veces)

HumbertoAli

Propiedad position CSS: qué significa static, relative, absolute, fixed CU01032D

pedro,,

Re:Propiedad position CSS: static, relative, absolute, fixed. (CU01032D)

Preguntas y respuestas

Foros aprenderaprogramar.com Didáctica y divulgación de la programación

Noticias:

Autor Tema: Propiedad position CSS: qué significa static, relative, absolute, fixed CU01032D (Leído 2162 veces)

HumbertoAli

Propiedad position CSS: qué significa static, relative, absolute, fixed CU01032D

pedro,,

Re:Propiedad position CSS: static, relative, absolute, fixed. (CU01032D)

Preguntas y respuestas

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación