ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACIÓN

POSICIONAMIENTO

Bienvenidos estimados aprendices a la competencia:

CONSTRUIR EL SISTEMA QUE CUMPLA CON LOS REQUISITOS DE LA SOLUCIÓN INFORMÁTICA

Resultado de Aprendizaje:

Construir la interfaz de usuario, apoyado en la evaluación del prototipo, determinando las entradas y salidas requeridas en el diseño y definiéndolos lineamientos para la navegación, de acuerdo con las necesidades del usuario
Tematica
Generalidades
Selectores
Modelo de Caja
Posicionamiento
Enlaces
Imagenes
Listas
Tablas
Formularios
Flexbox

1. Que es el Posicionamiento de Cajas

En esencia, es mover un conjunto de cuadros rectangulares que se pueden colocar en los ejes x, y y z. Hay diferentes formas / métodos para posicionar elementos con CSS puro. Usando position, float, flexbox y grid son los métodos más comunes desde el más básico al mas avanzado.

app form

2. Tipos de Posicionamiento CSS

position: static

Úse .static para colocar un elemento de acuerdo con el flujo normal del documento.

app form

comportamiento normal o por defecto.

Ejemplo de las propiedad position: static;

index.html

Static 
<!--definimos los elementos en HTML-->
<div class="caja_static">Static</div>

style.css

/*Se aplica ancho al parrafo 1 y ancho y alto parrafo 2*/
.caja_static { 
  background-color: #ed8936;
  color: #fff;
  width: 256px; /*ancho del elemento*/
  height: 128px; /*alto del elemento*/

  position:static; /*posicion static o por defecto del elemento*/
  left: 48px; /*se deplaza de izquierda a derecha 48px*/
  
}

position: relative

Nos permite mover el elemento a una ubicación relativa a su posición original utilizando las propiedades: left, top, right, bottom. En lo posible se recomienda mejor utilizar margin. position: relative se utiliza más para posicionar elementos de forma absoluta dentro del elemento.

app form

Permite que un elemento se desplace respecto a lo que hubiera sido su posición normal; el resto de elementos continúan en su posición ignorando al que se desplaza, lo que puede crear superposiciones; el espacio libre que deja el elemento queda libre.

Ejemplo de las propiedad position: relative;

index.html

Relative 
<!--definimos los elementos en HTML-->
<div class="caja_relative">Relative</div>

style.css

/*Se aplica ancho al parrafo 1 y ancho y alto parrafo 2*/
.caja_relative { 
  background-color: #ed8936;
  color: #fff;
  width: 256px; /*ancho del elemento*/
  height: 128px; /*alto del elemento*/

  position:relative; /*posicion relativa del elemento*/
  left: 48px; /*se deplaza de izquierda a derecha 48px*/
  top: 48px;  /*se deplaza de arriba a abajo 48px*/
}

position: absolute

Úse absolute para colocar un elemento fuera del flujo normal del documento, haciendo que los elementos vecinos actúen como si el elemento no existiera.

app form

Permite que un elemento se desplace respecto al origen de coordenadas del primer elemento contenedor posicionado ó respecto a la esquina superior izquierda de la ventana de visualización; el resto de elementos actúan como si el desplazado no existiera, por lo que su espacio será ocupado por otros elementos; puede crear superposiciones.

Ejemplo de las propiedad position: absolute;

index.html

Absolute 1
Absolute 2 
<!--definimos los elementos en HTML-->
<div class="padre_relative">
    <div class="hijo_absolute1">
    Absolute 1
    </div>
    <div class="hijo_absolute2">
    Absolute 2
    </div>
</div>

style.css

/*Se aplica ancho al parrafo 1 y ancho y alto parrafo 2*/
.padre_relative { 
background-color: #ed8936;
color: #fff;
width: autopx; /*ancho del elemento*/
height: 128px; /*alto del elemento*/
position:relative; /*posicion relativa del elemento*/
left: 48px; /*se deplaza de izquierda a derecha 48px*/
top: 48px;  /*se deplaza de arriba a abajo 48px*/
}
.hijo_absolute1 { 
  background-color: #f56565;
  color: #fff;
  padding: 12px;
  position:absolute; /*posicion absolute del elemento*/
  left: 80px; /*se deplaza de izquierda a derecha 80px*/
  }
.hijo_absolute2 { 
  background-color: #ecc94b;
  color: #fff;
  padding: 12px;
  position:absolute; /*posicion absolute del elemento se sobrepone*/
  left: 16px; /*se deplaza de izquierda a derecha 48px*/
}

position: fixed

Úse fixed para colocar un elemento en relación con la ventana del navegador.

app form

permite fijar un elemento en una posición respecto al origen de coordenadas del primer elemento contenedor posicionado ó respecto a la esquina superior de la ventana de visualización; el elemento se mantendrá en la ventana de visualización o viewport, siempre en una misma posición aunque el usuario se desplace por la web haciendo scroll

Ejemplo de la propiedad position: fixed;

index.html

Fixed
Absolute 
<!--definimos los elementos en HTML-->
<div class="padre_relative">
    <div class="hijo_fixed">
    Absolute 1
    </div>
    <div class="hijo_absolute">
    Absolute 2
    </div>
</div>

style.css

/*Se aplica ancho al parrafo 1 y ancho y alto parrafo 2*/
.padre_relative { 
background-color: #ed8936;
color: #fff;
width: autopx; /*ancho del elemento*/
height: 128px; /*alto del elemento*/
position:relative; /*posicion relativa del elemento*/
left: 48px; /*se deplaza de izquierda a derecha 48px*/
top: 48px;  /*se deplaza de arriba a abajo 48px*/
}
.hijo_fixed { 
  background-color: #f56565;
  color: #fff;
  padding: 12px;
  position:fixed; /*posicion fija del elemento*/
  left: 80px; /*se deplaza de izquierda a derecha 80px*/
  }
.hijo_absolute { 
  background-color: #ecc94b;
  color: #fff;
  padding: 12px;
  position:absolute; /*posicion absolute del elemento se sobrepone*/
  left: 16px; /*se deplaza de izquierda a derecha 48px*/
}

3. Posicionamiento Z-Index en CSS

La propiedad z-index sirve para regular el orden de visualización de capas superpuestas. Es un valor numérico que tendrá más prioridad cuanto mayor sea. Sólo funciona con elementos que tengan algún tipo de posicionamiento (relativo, absoluto o fijo).

Concepto Descripción
z-index: valor_numerico;

Ejemplo de la propiedad z-index: ;

index.html

z-40
z-30
z-20
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Posicionamiento Z-Index en CSS</title>
<!--Enlace para llamar al archivos css -->
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
  <div class="caja1">
    <h1 >1</h1>
  </div>
  <div class="caja2">
    <h1 >2</h1>
  </div>
  <div class="caja3 ">
    <h1 >3</h1>
  </div>
</div>

</body>
</html>

style.css

/*Importación del tipo de letra Roboto de Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/*todos los elementos dentro del body heredan el tipo y tamaño de letra*/
body{
  font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
  font-size: 14px;
}
.container{
  width: 1000px;
  height: 1000px;
  background: #ccc;
  border: 2px solid;
  margin: auto;
}
h1{
  font-size: 30px;
  text-align:center;
}
.caja1{
  width:  64px;               /*ancho*/
  height: 64px;              /*alto*/
  background-color: #ecc94b; /*color de fondo*/
  color: #fff;
  position: relative;
  z-index: 1;
  left: 200px;
  top:200px;
}
.caja2{
  width:  64px;               /*ancho*/
  height: 64px;              /*alto*/
  background-color: #4299e1; /*color de fondo*/
  color: #fff;
  position: relative;
  z-index: 3;
  left: 250px;
  top:100px;
}
.caja3{
  width:  64px;               /*ancho*/
  height: 64px;              /*alto*/
  background-color: #f56565; /*color de fondo*/
  color: #fff;
  position: relative;
  z-index: 2;
  left: 300px;
  top:50px;
}

4. Posicionamiento Flotante en CSS

El posicionamiento flotante es una propiedad que nos permite hacer saltar las cajas del flujo normal del documento y posicionar elementos a la izquierda y/o a la derecha de su elemento contenedor. En caso de no existir elemento contendor se considera el body.

Concepto Descripción
float: left | right | both;
Clear: left | right | both;

Ejemplo de la propiedad float: left; y clear: left;

index.html

1

2

3

4

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Posicionamiento Flotante izquierda en CSS</title>
<!--Enlace para llamar al archivos css -->
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="espacio">
  <div class="caja flotante">
    <h1 >1</h1>
  </div>
  <div class="caja flotante">
    <h1 >2</h1>
  </div>
  <div class="caja limpia ">
    <h1 >3</h1>
  </div>
  <div class="caja ">
    <h1 >4</h1>
  </div>
</div>

</body>
</html>

style.css

/*Importación del tipo de letra Roboto de Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/*todos los elementos dentro del body heredan el tipo y tamaño de letra*/
body{
  font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
  font-size: 14px;
}
.enlace-blue{
  text-decoration:none;
  color: #4299e1;
  margin: 8px;
}
.espacio{
  padding-top: 24px;
  padding-bottom: 24px;
}
h1{
  font-size: 30px;
  text-align:center;
}
.caja{
  width:  64px;               /*ancho*/
  height: 64px;              /*alto*/
  background-color: #ebf8ff; /*color de fondo*/
  color: #fff;
  margin: 8px;
}
.caja .flotante{
  float:left; /*el elemeno flotara la izquierda*/
}
.limpia{
 clear:left; /*limpia el comportamiento de flotar a la izquierda*/
}

Ejemplo de las propiedad float: right; y clear: both;

index.html

1

2

3

4

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Posicionamiento Flotante Derecha en CSS</title>
<!--Enlace para llamar al archivos css -->
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="espacio">
  <div class="caja flotante">
    <h1 >1</h1>
  </div>
  <div class="caja flotante">
    <h1 >2</h1>
  </div>
  <div class="caja limpia ">
    <h1 >3</h1>
  </div>
  <div class="caja ">
    <h1 >4</h1>
  </div>
</div>

</body>
</html>

style.css

/*Importación del tipo de letra Roboto de Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/*todos los elementos dentro del body heredan el tipo y tamaño de letra*/
body{
  font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
  font-size: 14px;
}
.enlace-blue{
  text-decoration:none;
  color: #4299e1;
  margin: 8px;
}
.espacio{
  padding-top: 24px;
  padding-bottom: 24px;
}
h1{
  font-size: 30px;
  text-align:center;
}
.caja{
  width:  64px;               /*ancho*/
  height: 64px;              /*alto*/
  background-color: #ebf8ff; /*color de fondo*/
  color: #fff;
  margin: 8px;
}
.caja .flotante{
  float: right; /*el elemeno flotara a la derecha*/
}
.limpia{
 clear:both; /*limpia el comportamiento de flotar a la derecha*/
}

Ejemplo Practico: Posicionamiento en CSS

Observando el video desarrolla el ejercicio creando una página web con las siguientes Características:

index.html

1

2

3

4

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tipos de Posicionamientos CSS</title>
   <!--Enlace para llamar al archivos css -->
   <link rel="stylesheet" href="style.css">
</head>
<body>


<a class="enlace-blue " href="index.html">Static</a>
<a class="enlace-blue " href="relative.html">Relative</a>
<a class="enlace-blue " href="absolute.html">Absolute</a>
<a class="enlace-blue " href="fixed.html">Fixed</a>

<div class="espacio">
<div class="caja ">
  <h1 >1</h1>
</div>
<div class="caja tipo">
  <h1 >2</h1>
</div>
<div class="caja ">
  <h1 >3</h1>
</div>
<div class="caja ">
  <h1 >4</h1>
</div>
</div>

</body>
</html>

style.css

/*Importación del tipo de letra Roboto de Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/*todos los elementos dentro del body heredan el tipo y tamaño de letra*/
body{
  font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
  font-size: 14px;
}
.enlace-blue{
  text-decoration:none;
  color: #4299e1;
  margin: 8px;
}
.espacio{
  padding-top: 24px;
  padding-bottom: 24px;
}
.caja{
  width:  64px;               /*ancho*/
  height: 64px;              /*alto*/
  background-color: #ebf8ff; /*color de fondo*/
  color: #fff;
  margin: 8px;
}
.caja .tipo{
  position: static;
  left: 128px;
}
h1{
  font-size: 30px;
  text-align:center;
}

Ejemplo Practico N°2: Posicionamiento Flotante CSS

Observando el video desarrolla el ejercicio creando una página web con las siguientes Características:

index.html

Imagen 1

Imagen 2

Parrafo

Sidebar

Articulo

Footer

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tipos de Posicionamientos CSS</title>
<!--Enlace para llamar al archivos css -->
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="menu">
<a class="enlace-blue " href="#" >Inicio</a>
<a class="enlace-blue " href="#" >Nosotros</a>
<a class="enlace-blue " href="#" >Servicios</a>
<a class="enlace-blue " href="#" >Contactenos</a>
</div>

<div class="container espacio">
  <div class="imagen1">
    <h1 >Imagen 1</h1>
  </div>
  <div class="imagen2">
    <h1 >Imagen 2</h1>
  </div>
  <div class="parrafo limpia ">
    <h1 >Parrafo</h1>
  </div>
  <div class="sidebar ">
    <h1 >Sidebar</h1>
  </div>
  <div class="articulo ">
    <h1 >Articulo</h1>
  </div>
  <div class="footer ">
    <h1 >Footer</h1>
  </div>
</div>


</body>
</html>

style.css

/*Importación del tipo de letra Roboto de Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/*todos los elementos dentro del body heredan el tipo y tamaño de letra*/
body{
font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
font-size: 14px;
}
.menu{
  width: 1000px;
  margin: auto;
}
.enlace-blue{
text-decoration:none;
color: #4299e1;
margin: 8px;
}
.espacio{
padding-top: 24px;
padding-bottom: 24px;
}
.container{
  width: 1000px;
  height: 700px;
  margin: auto;
}
h1{
  font-size: 30px;
  text-align:center;
}

.imagen1{
width:  50%;               /*ancho*/
height: 150px;              /*alto*/
background-color: #3182ce; /*color de fondo*/
color: #fff;
float:left;
}
.imagen2{
  width:  50%;               /*ancho*/
  height: 150px;              /*alto*/
  background-color: #4299e1; /*color de fondo*/
  color: #fff;
  float:left;
  }
.parrafo{
  width:  100%;               /*ancho*/
  height: 200px;              /*alto*/
  background-color: #63b3ed; /*color de fondo*/
  color: #fff;
  clear:both;
  float:left;
}

.sidebar{
  width:  30%;               /*ancho*/
  height: 150px;              /*alto*/
  background-color: #3182ce; /*color de fondo*/
  color: #fff;
  clear: both;
  float:left;
  }
.articulo{
  width:  70%;               /*ancho*/
  height: 150px;              /*alto*/
  background-color: #4299e1; /*color de fondo*/
  color: #fff;
  float:left;
  }
.footer{
  width:  100%;               /*ancho*/
  height:100px;              /*alto*/
  background-color: #63b3ed; /*color de fondo*/
  color: #fff;
  clear:both;
  float:left;
}

Actividad #.6 CSS3: Tipo de Posicionamiento CSS

Ahora que ya sabes el uso de CSS en HTML es el momento de que empieces a practicar, aunque no es nada difícil, practica para desarrollar la habilidad en el aprendizaje.

Actividad #.8 CSS3: Posicionamiento Flotante CSS

Ahora que ya sabes el uso de CSS en HTML es el momento de que empieces a practicar, aunque no es nada difícil, practica para desarrollar la habilidad en el aprendizaje.

Te ha resultado util esta guia de aprendizaje ?

Que tal el contenido?

Nota Importante

Has llegado al final de esta guia virtual de aprendizaje. Espero que hayas disfrutado del recorrido por los conceptos básicos de CSS. En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y propiedades. En las siguiente guias virtuales ampliaremos con más detalle algunas de las cosas que ya hemos visto e introduciremos algunas características nuevas del lenguaje.

Creditos