APRENDE CSS DE FORMA VISUAL
Explorá el diseño web a través de ejemplos visuales y claros
¡Cambiar color de fondo!
¡Cambiar color del texto!
Secciones
Border
Padding
Margin
Position Relative
Position Absolute
Position Fixed
Position Sticky
Display Block
Inline
Inline-Block
Overflow
Float
Display: Flex
POSITION FIXED
:
.fixed{.....; position: fixed; top: calc(80% - 80px) ; right: 20px;}
.nofixed{.....; background-color: yellow;}
fixed
no-fixed
POSITION STICKY TOP: A medida que bajamos sticky mantiene 10px de distancia del tope
.divsticky {display: relative; width: 100%; height:800px; background-color:#333;}
.sticky {....; position: sticky; top: 10px ; right: 150px;}
.nosticky{....; background-color: yellow;}
sticky
no sticky
POSITION STICKY BOTTOM: A medida que subimos sticky1 y sticky2 mantienen 10px de distancia del fondo
.divsticky1 {display: relative; width: 100%; height:600px; background-color:#333;}
.nosticky1{...; background-color: yellow;}
.sticky1 {...;red ; position: sticky; bottom: 10px ; right: 150px;}
.sticky2 {...;green ; position: sticky; bottom: 10px ; right: 150px;}
no sticky
sticky1
sticky2