Tenemos Estos Positions

CSS
POSICIONAMIENTO
Tenemos estos positions

1. Absolute
2. Relative
3. Fixed
4. Sticky
5. Initial
6. Inherit
Todos estos nos van a dar un comportamiento diferente por cada una de las etiquetas. Las
podemos agregar a todas las etiquetas y nos van a dar el mismo comportamiento pero los
vamos a utilizar para diferentes cosas.
Static
Utilizamos este valor no vamos a tener ningún cambio porque todas las etiquetas vienen con
este valor.
Cuando estamos en este position no podemos utilizar las propiedades left, top, right y bottom.
Absolute
Con absolute el elemento sale de su lugar y el navegador reacomoda los elemento, poniendo
otro elemento en el lugar del elemento con position absolute. Podemos posicionar al elemento
como queramos.
Relative
Con relative no sucede lo mismo que absolute, el elemento mantiene su lugar, pero podemos
posicionarlo donde queramos.
Lo podemos usar como contenedor para que los elementos que tengan un position absolute
tomen como referencia al padre que nosotros queremos (se adhiere al elemento relativo más
cercano) y no a otro, delimita el movimiento del hijo.
Fixed
Este valor de position nos permite que el elemento que queramos nos siga a todos lados
desde el momento en el que nos topemos con él.
Sticky
Es similar a fixed con la diferencia que cuando encuentra a otro elemento con su mismo
position, sticky, le da lugar al ese elemento.
Initial
Vuelve el position de un elemento a como estaba originalmente.
Inherit
Lo usamos si queremos que nuestro elemento herede el position de su padre.
Left, top, right y bottom
Con estas cuatro propiedades podemos mover a los elementos que tengan como position a
absolute, relative fixed o sticky a los lugares que queramos.
PROPIEDADES MAS USADAS
<!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>Document</title>
<style>
section {
width: 100%;
display: flex;
justify-content: center;
}
.card {
width: 300px;
height: 300px;
background: papayawhip;
border-radius: 20px;
overflow: hidden;
}
.card img {
width: 100%;
}
.card p {
text-align: center;
}
.card p:nth-child(3) {
color: Turquoise;
}
</style>
</head>
<body>
<section>
<div class="card">
<img src="https://images.pexels.com/photos/1056251/pexels-photo-
1056251.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="cat">
<p>Cat: Mimi</p>
<p>Love</p>
</div>
</section>
</body>
</html>
Hay un dilema donde algunas personas dicen que los px no deberían ser medidas absolutas
porque dependen del DPI de la pantalla, aclaremos esto 👇:
.
Cuando hablamos de “medidas fijas” o “estáticas” nos referimos a que esta medida siempre va
a medir lo mismo es una misma pantalla (sin importar su DPI). No en todas las pantallas 1px
mide lo mismo, de hecho incluso cuando hacemos zoom el tamaño de ese píxel se modifica
(mide más de 1px, aunque le hayamos puesto 1px).
.
☝ Entonces aclarando esta duda, hablamos de medidas estáticas cuando es una medida que,
en una misma pantalla, siempre medirá lo mismo, sin depender de nadie.
.
Las medidas relativas dependen de algo para poder calcular su medida, por ejemplo, los
porcentajes dependen del elemento padre, los em rem dependen del font-size,
los vw y vh dependen del tamaño del viewport.
.
Básicamente esa es la diferencia entre medidas relativas y absolutas, de nuevo, ninguna es
mejor que otra y todas tienen sus casos de uso 👀
¿Para qué es responsive design?

Es para que nuestro proyecto web pueda ser multiplataforma, que se pueda ver bien en un
smartphone, desde una tablet, iPad y que se vean excelente desde una laptop o computadora
de escritorio.
Esto realizándolo siempre con buenas prácticas.
Para empezar debemos saber:
Media Queries
Con los media queries podemos jugar con el layout, cuando la pantalla del dispositivo sea
pequeña el contenido se ve de una forma, pero si está pantalla crece el contenido también lo
hace sin perjudicar el diseño.
Podemos cambiar la orientación de los contenedores, podemos cambiar su orden, incluso
cambiar las dimensiones.
Breakpoint
Son la dimensión en el viewport, es decir el width y el height de la pantalla, en donde vamos a
generar un cambio.
Este cambio es la forma en la que puedo reposicionar ciertos elementos o redimensionar
ciertos contenedores, todo esto para que se vea bien la web app y sin importar el dispositivo
en el que se abra.
min-width
Esto quiere decir que cuando la pantalla sea igual o más grande que el valor que coloquemos,
el código que esté adentro del media querie se va a ejecutar.
Pero si la pantalla es mayor a ese min-width habrá otro media querie que aplicará estilos
diferentes.
max-width
Esto quiere decir que cuando la pantalla sea igual o más pequeña que el valor que
coloquemos, el código que esté adentro del media querie se va a ejecutar.
La mejor forma de aplicar media queries
Tiene de nombre Mobile First o Mobile Only.
Esto quiere decir que el proyecto ya debe estar diseñado para dispositivos mobile, ya no
debemos preocuparnos por que se vea bien desde una laptop o computadora de escritorio.
El diseño del proyecto va a partir desde un dispositivo mobile y desde ahí va a ir creciendo a
los demás dispositivos con mayor pantalla.
Si hacemos lo contrario de ir de una pantalla grande a una más pequeña, esto se llama
solamente responsive design y no es lo que estamos buscando.
Aplicado directo desde CSS con media queries
1. Arriba de los media queries vamos a tener el código base, que es el que está hecho y
optimizado para dispositivos mobile.
2. Vamos a generar un breakpoint para realizar ciertos cambios en dispositivos más grandes.
3. Vamos a generar otro breakpoint que va a ser para una tablet o para computadoras con un
viewport más pequeño como ser netbooks
4. Luego vamos a generar otro breakpoint que será para computadoras de escritorio, desktop o
dispositivos con pantallas más grandes.
Orden para aplicar los media queries
Partimos desde los dispositivos más pequeños y terminamos con los dispositivos más
grandes.
Si lo hacemos de forma inversa tendremos problemas, ya que como CSS funciona en
cascada, nunca se van a aplicar los estilos de los medias queries con un viewport más
grande.
Empezamos por:
1. Los celulares o dispositivos mobile.
2. Las tablets.
3. Laptops o computadores de escritorio.
Aplicado directo desde HTML (la mejor practica)
Este método se utiliza, ya que dependiendo del dispositivo donde esté el usuario va a
necesitar un archivo CSS u otro, esto es para evitar que carguen archivos que el usuario no va
a necesitar ni usar.
Lo agregamos en el head, aquí en vez de ligar un archivo de CSS vamos a ligar más de uno,
dependiendo de los dispositivos en los que queramos aplicar los estilos.
Estilos enfocados a mobile
<link rel="stylesheet" href="style.css">
Si tenemos archivos CSS que van a impactar en otros dispositivos con diferente viewport
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1024px)">
Agregamos el atributo media cuyo valores va a ser el mínimo que necesitamos para hacer
ese breakpoint, que es ese cambio en el layout.
Orden final
<link rel="stylesheet" href="style.css"> 
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1024px)">
¿Qué son y para qué nos sirven las arquitecturas CSS?

Sirven para mantener un orden y una coherencia durante todo el proyecto. Tiene los
siguientes objetivos:
 Predecibles: escribir reglas claras.
 Reutilizable: no escribir código redundante.
 Mantenible: que sea fácil de leer y adaptable a los estándares.
 Escalable: que pueda crecer fácilmente sin afectar el rendimiento.
.
Estos objetivos se deben ver reflejadas en buenas practicas que debe conocer todo el equipo
involucrado en el proyecto como:
 Establecer reglas
 Explicar la estructura base
 Establecer estándares de codificación
 Evitar largas hojas de estilo
 Documentación
 Los objetivos de una buen arquitectura de CSS son básicamente que sea:
 Predecible: sus reglas hacen lo que se espera. Añadir o actualizar una regla no tiene
repercusiones inesperadas.
Reutilizable: las reglas son abstractas y están desacopladas. Así se podrán crear
nuevos componentes de forma más rápida y sencilla.
 Mantenible: es la capacidad de realizar cambios en las CSS sin necesidad de tener
que refactorizar el código existente.
 Escalable: significa que a medida que las CSS aumentan de tamaño, siguen siendo
fáciles de mantener. También significa que la arquitectura CSS no requiere de una alta
curva de aprendizaje.
Arquitectura CSS: cómo debería ser tu código CSS

Código predecible
Dentro de una arquitectura predecible las nuevas reglas de estilo que son añadidas
reaccionan de forma previsible: no sufren contaminación alguna por parte de otras reglas
(tampoco hacia otros elementos) ni existen dependencias incongruentes entre las reglas de
los diferentes elementos del plano.
Código reutilizable
La abstracción (aislar un elemento de su contexto o del resto de los elementos que lo
acompañan) es un paradigma de programación con una útil aplicación en nuestro entorno.
Mantener la abstracción en la arquitectura de CSS nos permitirá diseñar reglas modelo, aptas
para infinidad de elementos con características comunes
Código mantenible
Esta característica está referida a la facilidad con la que puede realizarse una modificación y/o
mantenimiento de un código. Algunas de las prácticas que garantizarán este aspecto son:
 Ordena, comenta y categoriza tu código de forma lógica y jerárquica
 Crea código legible
 Crea código intuitivo
 Declara clases descriptivas
Código escalable
Salvaguardar la escalabilidad de tu CSS supondrá que éste podrá ser manipulado de una
forma sencilla al realizar las tareas necesarias para abordar el crecimiento de la plataforma.
En estos casos la curva de aprendizaje que permitirá comprender y adquirir las capacidades
necesarias para alterar tu código no debería ser excesivamente grande
Notas de la clase
Básicos
 De tipo: div {...}
 De clase: .elemento {...}
 De ID: #id-del-elemento
 De atributo: a[href="..."]{...}
 universal: *{...}
Combinadores
 Descendientes: div p
 Hijo directo: div > p
 Elemento adyaente: div + p
 General de hermanos: div ~ p

Tenemos Estos Positions

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tenemos Estos Positions

Cargado por

Copyright:

Formatos disponibles

CSS

Tenemos estos positions

PROPIEDADES MAS USADAS

¿Para qué es responsive design?

¿Qué son y para qué nos sirven las arquitecturas CSS?

Arquitectura CSS: cómo debería ser tu código CSS

También podría gustarte