posicionamiento

Programación I

•

Inst Antioquia

0

Yarleyda Borja

6/8/2023

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Programación I

56.910 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

Propiedades de posicionamiento 
Un elemento posicionado es aquel elemento que ha salido de su flujo normal a través de la propiedad position, además adquiere nuevas propiedades.
La propiedad position establece en que punto de la página comenzará a posicionarse, mostrarse o dibujarse el elemento que se haya establecido en el código HTML.
Es importante saber desde que punto se va a empezar a pintar porque eso es lo que dirá que espacio ocupará cada elemento, por defecto si no se especifica, los elementos se crean con la propiedad position y el valor static, los elementos empezaran a pintarse desde la esquina superior izquierda. Los diferentes tipos de posicionamiento son:
· position:stsatic: valor por defecto
· position:Absolute: El elemento se coloca relativo al flujo normal
· position:Relative: El elemento se coloca respecto a su contenedor posicionado mas cerca
· position:Fixed: El elemento se coloca respecto al viewport
· position:Sticky: Es una combinación entre relativo y fijo
Al tener un elemento posicionado podemos moverlo en los 3 ejes y corresponder a cinco propiedades:
↔️ Eje X:
· right: mover el elemento desde la parte derecha hacia la izquierda
· left: mover el elemento desde la parte izquierda hacia la derecha
↕️ Eje Y:
· top: mover el elemento desde la parte superior hacia la inferior
· bottom: mover el elemento desde la parte inferior hacia la superior
🔄 Eje Z:
· z-índex: cuando dos o más elementos se solapan, podemos decidir cual aparece primero y cual por detrás de él.
Las propiedades top, right, bottom, left y z-index no funcionarán y no estarán habilitadas para los elementos con posicionamiento estático por lo tanto los elementos no se podrán mover o desplazar.
En la propiedad z-index solo se especifica un numero entero positivo/negativo, no se usa unidades tales como pixeles o porcentajes. La propiedad z-indextoma un valor numérico entre 0 y ±2147483647 en la mayoría de los navegadores comunes.
Ejemplo de css:
position: static;
position: relative;
top: 40px; left: 40px;
position: absolute;
top: 40px; left: 40px;
position: sticky;
top: 20px;
EJEMPLO DE HTML
EJEMPLO DE CSS
display: block: las cajas quedan una debajo de otra
EJEMPLO
HTML
<div>Soy display block</div>
<div>Soy display block</div>
<div class="con_medidas">Soy display block</div>
CSS
div{
    background-color: aqua;
    margin: 10px; 
    padding: 10px; */
  }
  
  .con_medidas {
    width: 200px; 
    height: 200px; 
  }
  
 
  * {
    font-size: 1.2rem;
    margin: 0;
  }
display: inline: los bloques quedan uno al lado del otro. Ejemplo: 
<span>mi clase</span>
<span>mi clase</span>
<span>mi clase</span>
<span>mi clase</span>
<span class="con_medidas">mi clase</span>
CSS
span{
    background-color: aqua;
    /* margin: 20px; */
    /* padding: 20px; */
  }
  
  .con_medidas {
    /* width: 200px; */
    /* height: 200px; */
  }
  
  /* Ignora estos estilos, por ahora */
  * {
    font-size: 1.2rem;
    margin: 0;
  }
display: inline-block: los bloques quedan uno al lado del otro
EJEMPLO 
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clase de jueves</title>
    <link rel="stylesheet" href="estilojueves.css">
</head>
<body>
    <button>Ejemplo display uno inline-block</button>
    <button>Ejemplo display dos inline-block</button>
    <button>Ejemplo display tres inline-block</button>
    <button>Ejemplo display cuatro inline-block</button>
    <button class="con_medidas">Ejemplo display cinco inline-block</button>
</body>
</html>
CSS
button{
    margin: 10px; 
    padding: 10px; 
    background:aqua;
  }
  
  .con_medidas {
    width: 300px;
    height: 100px;
    color:brown;
    background:aqua;
  }
  
  
  * {
    font-size: 1.1rem;
    margin: 0;
  }
display: none: desactiva la visualización de un elemento, como si el elemento no existiera. EJEMPLO
HTML
 <div class="desaparecer">
    En mi siguiente truco, ¡voy a desaparecer!
    </div>
CSS
 body{
    display: flex;
  }
  
  div{
    background-color: coral;
    width: 120px;
    height: 120px;
    font-weight: 800;
    padding: 8px;
  }
Introducción a Flex-box (display:flex) 
Flexbox (o el módulo de cajas flexibles) es probablemente uno de los más completos y eficaces módulos de maquetación. Todo lo que era complicado en versiones anteriores de CSS (como centrar verticalmente o diseñar estructuras que se redimensionan con elegancia) con flexbox (CSS3) es ya una tarea muy fácil.
Flexbox representa un modelo básico de maquetación que supone la existencia de una caja padre llamada contenedor flexibleo caja flex. Los elementos hijos situados dentro del contenedor flexible llevan el nombre de elementoso ítems flex.
Los elementos flex tienen la capacidad de redimensionarse y recolocarse dentro de la caja flex con facilidad. También tienen la capacidad de alinearse tanto horizontalmente como verticalmente y todo esto puede ser muy interesante a la hora de diseñar páginas web adaptativas.
La propiedad display está por ahí desde CSS1, pero es en el CSS3 cuando adquiere la capacidad de transformar una caja cualquiera en un contenedor flex. Para esto tiene que tomar una de estos valores: flexo flex-inline.
.flex-container{display:flex;}
 o
.flex-container{display:flex-inline;}
.flex-container{
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
}			 
.flex-container-inline{
	display:-webkit-inline-flex; 
	display: -ms-inline-flexbox; 
	display: inline-flex;
}
propiedades del contenedor: 
flex-direction: Establece la dirección del eje principal y por tanto la dirección de los elementos flex.
El valor por defecto es row ( fila ).
flex-direction: row | row-reverse | column | column-reverse;
.flex-container{ 
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row; 
}
justify-content: Define como se colocan los elementos dentro de una caja flexible ( flexbox ) relativamente al eje principal, cuando los elementos no ocupan toda la caja.
El valor por defecto es flex-start.
justify-content: flex-start | flex-end | center | space-between | space-around;
-ms-flex-pack: start | end | center | justify | justify;
.flex-container{
 -webkit-justify-content:flex-start;
 -ms-flex-pack:start;
 justify-content:flex-start; 
}
align-item: Define como se colocan los elementos dentro de una caja flexible flexbox relativamente al eje transversal.
El valor por defecto es stretch.
align-items: flex-start | flex-end | center | baseline | stretch;
-ms-flex-align:start | end | center | baseline | stretch;
.flex-container{
 -webkit-align-items: flex-start;
 -ms-flex-align:start;
 align-items: flex-start;
}
align-content: Alinea los elementos del contenedor flex cuando los elementos no utilizan todo el espacio disponible en el eje transversal.
El valor por defecto es stretch.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
-ms-flex-line-pack: start | end | center | justify | stretch;
.flex-container{
 -webkit-align-content: flex-start;
 -ms-flex-line-pack:start;
 align-content: flex-start;
}
flex-wrap: Especifica si puede haber un cambio de línea ( wrap ) o no ( nowrap ).
El valor por defecto es nowrap.
flex-wrap: nowrap | wrap | wrap-reverse;
.flex-container{
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}
propiedades de los items: 
order: Se utiliza para cambiar el orden en el que aparecen los elementos individuales.
order: número | initial | inherit;
.item{
 -webkit-order: 2;
 -ms-order:2;
 order: 2;
}
align-self: Reposiciona elementos individuales relativamente al eje transversal. Generalmente se trata de elementos posicionados con align-items.
align-self: auto | flex-start | flex-end | center | baseline | stretch;
-ms-flex-item-align:auto | start | end | center | baseline | stretch;
.item {
 -webkit-align-self: flex-start;
 -ms-flex-item-align:start;align-self: flex-start;
}
flex-basis: Especifica el valor inicial del tamaño principal de un elemento flex.
El valor por defecto es auto.
flex-basis: número | auto | initial | inherit;
.item {
 -webkit-flex-basis: auto;    
 -ms-flex-basis: auto;
 flex-basis: auto;
}
flex-grow: Define cuánto puede crecer un elemento flex, si fuera necesario.
El valor por defecto es 0.
flex-grow: número | initial | inherit;
.item{
 -webkit-flex-grow: 2;
 -ms-flex-grow:2;
 flex-grow: 2;
}
flex-shrink: Define cuánto puede disminuir ( contraerse ) un elemento flex, si fuera necesario.
El valor por defecto es 1.
flex-shrink: número | initial | inherit;
.item{
 -webkit-flex-shrink: 2;
 -ms-flex-shrink:2;
 flex-shrink: 2;
}
flex: La forma abreviada para flex-grow, flex-shrink y flex-basis juntos.
El valor por defecto es 0 1 auto.
flex: none | flex-grow [flex-shrink] [flex-basis];
.item {
 -webkit-flex: 1;    
 -ms-flex: 1;
 flex: 1;
}