No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Posicionamiento en CSS

15/24
Recursos

El posicionamiento en CSS consiste en c贸mo un elemento se situar谩, con respecto a su elemento padre y al flujo normal del documento. El flujo normal del documento es el orden de los elementos establecidos en el HTML.

La posici贸n del elemento se la define con la propiedad position, mediante los siguientes valores:

  • static
  • relative
  • absolute
  • sticky
Tipos de posicionamiento en CSS

Propiedades de posici贸n

Adem谩s de la propiedad position, existen cuatro propiedades del elemento de acuerdo a su posici贸n con respecto a su padre, estas son: top (arriba), bottom (debajo), left (izquierda) y right (derecha).

div {
    top: 10px;
    bottom: 15px;
    left: 20px;
    right: 10px;
}

Estos valores estar谩n establecidos en el padre pr贸ximo que tenga la posici贸n relative.

Si top y bottom est谩n definidos, top gana. Si left y right est谩n definidos, left gana (dependiendo el idioma configurado).

Posici贸n est谩tica

La posici贸n static es el valor por defecto de todo elemento HTML, consiste en respetar el flujo normal del documento donde las propiedades de posici贸n no pueden ser establecidas.

Posici贸n relative

La posici贸n relative consiste en respetar el flujo normal del documento donde las propiedades de posici贸n s铆 pueden ser establecidas.

Posici贸n absoluta

La posici贸n absolute consiste en quitar al elemento del flujo normal del documento donde las propiedades de posici贸n s铆 pueden ser establecidas.

En el siguiente ejemplo, observa que pasa con el primer elemento con respecto a los dem谩s.

Habr谩s notado que el elemento "鈥2"鈥 desaparece, pero en realidad lo que sucede es que sit煤a por detr谩s del elemento con posici贸n absoluta que sali贸 del flujo normal del documento. Este comportamiento se debe al eje Z de la pantalla y al contexto de apilamiento.

Elemento padre m谩s pr贸ximo con posici贸n relativa

El elemento con posici贸n absoluta se desplazar谩 arriba, abajo, izquierda o derecha con respecto al elemento padre m谩s pr贸ximo con posici贸n relativa.

Si no existe un padre con posici贸n relativa de un elemento con posici贸n absoluta, este se desplazar谩 con respecto al elemento ra铆z del documento.

En el siguiente ejemplo, te encontrar谩s varios contenedores padres, incluso las etiquetas <html> y <body>. Sigue los pasos y observa el comportamiento. Ignora los estilos iniciales, simplemente sirven para establecer la estructura del ejercicio.

Como pudiste observar, en el elemento con posici贸n absoluta, su desplazamiento se basa con relaci贸n al elemento padre m谩s pr贸ximo con posici贸n relativa.

Posici贸n fija

La posici贸n fixed consiste en quitar al elemento del flujo normal del documento y fijarlo en un lugar; donde las propiedades de posici贸n s铆 pueden ser establecidas.

En el siguiente ejemplo, despl谩zate por el documento, observa el comportamiento antes y despu茅s de colocar la posici贸n fija.

Posici贸n variable fija

La posici贸n sticky consiste en quitar al elemento del flujo normal del documento y fijarlo en un lugar mientras su contenedor sea visible; donde las propiedades de posici贸n s铆 pueden ser establecidas.

En el siguiente ejemplo, despl谩zate por el documento, observa el comportamiento antes y despu茅s de colocar la posici贸n variable fija.

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 152

Preguntas 22

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃憞 Expande este comentario para que veas c贸mo darle su estambre a un michi usando position 7u7
.
El tema de position es muy interesante porque es pr谩cticamente otra forma que tenemos de posicionar con CSS 馃憖.
.
Usualmente es preferible trabajar con nuestras t茅cnicas de alineamiento comunes como CSS Grid o Flexbox, pero suele haber casos donde s铆 o s铆 necesitamos usar position.
.
El ejemplo m谩s com煤n es con el men煤 de navegaci贸n, que casi siempre solemos verlo en todas las p谩ginas. Aunque tambi茅n podr铆amos usarlos si queremos posicionar un elemento con base en otro (aqu铆 es donde intervienen el relative con el absolute), y de hecho esta tambi茅n es una t茅cnica muy usada cuando se dibuja con CSS 7u7.
.
隆Hagamos algo! Imaginemos que queremos darle su bola de estambre a este michi 馃樇:
.
Bola de estambre
.

.
Michi
.

.
Lo primero que har铆a es crear un contenedor y dentro meter al michi y a la bola de estambre (las im谩genes las toma desde internet):
.

<div class="container">

    <img id="estambre" src="https://pixabay.com/get/gcace262ba99b669194b5054d0a18589d64d2858de5ccde802a2bd69112122969cc55406c4d138c9738ad55e21d831bab_640.png" alt="Estambre">

    <img id="michi" src="https://static.platzi.com/media/user_upload/michi-0cd46b59-feda-4746-81a0-cc48179411ae.jpg" alt="Michi">
    
</div>

.
Nota que a cada uno le puse un id. Tambi茅n me interesa que mi bola de estambre est茅 chiquita para que el michi la pueda agarrar, as铆 que desde CSS le puedo cambiar el tama帽o:
.

.container,
#michi {
    width: 800px;
}
#estambre {
    width: 100px;
}

.
Con esto hago que mi contenedor y el michi midan 800px y que la bolita de estambre mida 100px, as铆 que me queda as铆:
.

.
Ahora solo nos queda d谩rsela, para eso podemos usar position. Simplemente a mi container le pongo un position: relative; y al estambre le pongo un position: absolute;. Recuerda que cuando usamos un absolute, este elemento se va a mover con respecto al elemento relative m谩s cercano, as铆 que en este caso moveremos el estambre con respecto a nuestro contenedor 馃槃.
.
Sabiendo que podemos mover el estambre dentro de nuestro container, nos tocar谩 adivinar cu谩ntos pixeles hacia abajo y cu谩ntos pixeles hacia la izquierda deberemos moverlo para d谩rselo al michi 馃憖. En este caso, yo s茅 que debo moverlo 190 pixeles hacia abajo y 245 pixeles hacia la izquierda, por lo que el resto de mi c贸digo CSS quedar铆a as铆:
.

.container {
    position: relative;
}

#estambre {
    position: absolute;
    top: 190px;
    right: 245px;
}

.
隆Y con esto el michi ya tendr铆a su estambre!
.

.
Este es un ejemplo de c贸mo podemos usar position para posicionar un elemento con respecto a otro, pero realmente hay varios usos que podemos darle, as铆 que te toca practicar 馃樇.

The Z-index


Static position


Absolute position


Relative position


Fixed position

Positioning in web design

Les comparto mis apuntes. 馃槃

驴Qu茅 es position?

Es la forma en la que podemos posicionar los contenedores, cajas o etiquetas de HTML cuando la utilizamos.

Tenemos diferentes position en CSS, pero todas las etiquetas en HTML vienen por defecto con el position static. Se quedan en donde nosotros las ponemos, no se mueve con el scroll.

position: valor;

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.

Es posible crear texto de relleno (Lorem Ipsum) con visual studio code. Si escribimos el siguientes comando dentro de una etiqueta.

lorem + tab

No saldr铆a un texto alternativo.

驴Qu茅 pasa si quiero un texto alternativo con 10 palabras? Pues tecleamos lo siguiente

lorem10 + tab

Puedes crear contenido de relleno de una manera muy sencilla, para que te des una idea de c贸mo se ver铆a tu p谩gina web cuando a煤n no sabes cual es el contenido que va a tener.

Hola!! comparto mi mini trabajo que hice pr谩cticando lo de position 馃槃馃槃

Si lo quieren ver en funcionamiento 馃槂
https://miguel-angelrc.github.io/position-css/

C贸digo

https://github.com/Miguel-AngelRC/position-css

Propiedades de posicionamiento CSS

  • top.- establece la distancia superior, del elemento respecto a otro.
  • left.- establece la distancia por el lado derecho del elemento respecto a otro.
  • bottom.- distancia inferior de un elemento respecto a otro.
  • right.- distancia por el lado izquierdo de un elemento respecto a otro.

Valores para la propiedad position

  • estatic.- la forma por defecto, obedece al flujo normal de la p谩gina.
  • relative.- establece que la posici贸n de un elemento depende de otro.
  • absolute.- indica que la posici贸n de un elemento no depende de otro.
  • fixed.- permite fijar un elemento en una posici贸n determinada.
  • inherit.- hereda el estilo de posici贸n del elemento padre.

Posicionamiento relativo (relative)
El valor relative para la propiedad position de CSS, establece que el elemento ser谩 posicionado relativo a su posici贸n normal o inicial y sus caracter铆sticas m谩s destacadas son:

  • Los elementos con posici贸n relativa se encuentran el espacio original que ocupaban.
  • El valor relativesaca al elemento del flujo normal para que quede posicionado con propiedades de posicionamiento.
  • Ahora tiene sentido establecer las propiedades: arriba, derecha, abajo o izquierda para indicar cu谩nto y d贸nde se desplazan los elementos.
  • El elemento ser谩 desplazado tomando en cuenta a su posici贸n original como punto de partida.
  • Los elementos posicionados con relative pueden superponerse a otros.

Posicionamiento absoluto (absolute)

El posicionamiento absoluto de elementos con CSS posee caracter铆sticas que lo diferencian de las otras formas de posicionamiento y eso es lo que vamos a conocer y practicar en esta secci贸n.

El valor absolute para la propiedad position establece que un elemento debe ser posicionado de forma absoluta y b谩sicamente se comporta de la siguiente manera:

  • El elemento es removido del flujo normal de contenido para ser posicionado mediante las propiedades de posicionamiento.
  • Una vez removido no conserva el espacio que ocupaba originalmente, es decir los dem谩s elementos se comportan como si el elemento posicionado como absoluto no existiera.
  • Elementos posicionados como absoluto pueden superponerse sobre los dem谩s elementos.
  • En el posicionamiento absoluto, los elementos se posicionan respecto al elemento padre m谩s cercano que tenga establecido una forma de posicionamiento (position) distinto al por defecto o static.

Posicionamiento fijo (fixed)
El posicionamiento fijo de elementos en CSS consiste en establecer una posici贸n determinada para un elemento, de tal manera que queda fija y no se mueva de dicha posici贸n, aun cuando se hace scroll en la pantalla.

Para establecer una posici贸n fija, se emplea el valor fixed para la propiedad position.

Caracter铆sticas de un elemento con position: fixed

  • Los elementos posicionados con valor fixed salen del flujo normal para ser posicionados con las propiedades de posicionamiento.
  • El espacio original que ocupaba un elemento desaparece una vez establecida la posici贸n fija, por ende los dem谩s elementos se comportan como si no existiera.
  • El elemento se posiciona respecto a los l铆mites de la pantalla, es decir el punto de partida es el borde de pantalla.
  • Quedan fijas en una posici贸n determinada y no pueden moverse aunque el usuario se desplace por la pantalla.
  • Elementos fijados pueden superponerse sobre otros.

comando vsc
alt+z = ajusta el contenido del archivo en vertical






No necesitan ir a google y buscar textos lorem ipsum; en cambio si est谩n usando VS Code solo escriben la palabra lorem y le dan enter y autom谩ticamente el editor les crear谩 el p谩rrafo.

Qu茅 sucede si quieren textos m谩s largos?
F谩cil: solo escriben lorem3 y les crear谩 3 l铆neas de texto, o lorem6, etc鈥


馃槀馃槀馃槀

Ahora si lo entend铆.
.
Tuve que volver a ver la clase porque no lograba comprender c贸mo interactuan relative y absolute.
.
Ah铆 les va.
.
Estos dos est谩n relacionados y se usan cuando hay relacion contenedor padre - hijo.

Position; Absolute; va con los contenedores hijos y nos va a permitir que podamos ubicar dicho contenedor de forma personalizada usando Top, Left, Right y Bottom. Funcioa parecido a un sistema de coordenadas pero, pero, pero, pero 驴Ya viste el curso de programacion de Freddy? Cuando dibujamos en canvas tambien usamos coordenadas, pero en este caso de CSS funcionan un poco diferente.
.
Si colocas por ejemplo
Right: 50px;
El elemento no se va a mover al pixel 50 del eje horizontal, (de izquierda a derecha) no. Lo que va a pasar es que va a existir una distancia de 50px entre el elemento y la parte derecha contenedor.
.

.
Lo entendiste? as铆 funciona con las 4 direcciones. Mas que un sistema de coordenadas, funciona como un margen, pero que no afecta a los demas elementos, ese 鈥渕argen鈥 solo existe entre el elemento que estamos estilizando y el contenedor.
.
Vale, hasta ahora bien 驴Que hace el relative entonces?
.
Bien, te hablaba de que el Position: absolute; crea una diferencia de pixeles entre el elemento y los lados de un contenedor鈥 pero 驴Cu谩l contenedor? 驴El body? 驴El contenedor donde est谩n anidados los elementos en HTML? 驴El contenedor de al lado?
.
Relative es para el contenedor y lo que hace es que los elementos dentro de 茅l se muevan relativo a dicho contenedor.
.
Con esto lo vas a entender.
.

.
En esta imagen tenemos el body de fondo morado, un contenedor de fondo azul y un elemento rojo. Mi elemento rojo tiene.
.

.
Tiene un right: 50px
Es decir, est谩 a 50px de distancia del lado derecho (right) del contenedor. Pero por defecto no pasa esto. Si no agregas la instruccion 鈥減osition: relative;鈥 esto es lo que pasa
.

.
El elemento se mueve relativo al body y no al contenedor que queremos.
.
Agregar el 鈥減osition: relative鈥 al contenedor har谩 que los elementos dentro de dicho contenedor se muevan relativo al dicho contenedor.

Antes no sabia como lograr ese efecto de sticky, ya que lo ve铆a en muchas paginas, Era mas f谩cil de lo que pensaba. Las clases de Estefany Aguilar son incre铆bles!!

<!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>
        body{
            background-color: whitesmoke;
        }
        .container
        {
            width: 500px;
            height: 500px;
            position: relative;
            background-image: url(https://image.slidesharecdn.com/circulosdecolores1-151001075614-lva1-app6891/95/circulos-de-colores-1-1-638.jpg?cb=1443686190);
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 4px;
        }
        .red-ball{
            position: absolute;
            top: 1px;
            left: 10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,0,0,1) 0%, rgba(23,0,85,1) 100%);
        }
        .blue-ball{
            position: absolute;
            top: 1px;
            left: 100px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(23,39,116,1) 0%, rgba(23,0,85,1) 100%);
        }
        .green-ball{
            position: absolute;
            top: 1px;
            left: 200px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(119,217,112,1) 0%, rgba(23,0,85,1) 100%);
        }.yellow-ball{
            position: absolute;
            top: 1px;
            left: 300px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,243,56,1) 0%, rgba(23,0,85,1) 100%);
        }
                            /* Columna 1 */
        .rone{
            top: 90px;
            left: 30px;
        }
        .gone{
            top: 185px;
            left: 25px;
        }
        .yone{
            top: 280px;
            left: 25px;
        }
        .bone{
            top: 376px;
            left: 25px;
        }
                            /* Columna 2 */
        .ytwo{
            top: 90px;
            left: 130px;
        }
        .btwo{
            top: 185px;
            left: 130px;
        }
        .gtwo{
            top: 280px;
            left: 130px;
        }
        .rtwo{
            top: 375px;
            left: 130px;
        }
                            /* Columna 3 */
        .gtree{
            top: 90px;
            left: 235px;
        }
        .rtree{
            top: 185px;
            left: 235px;
        }
        .btree{
            top: 280px;
            left: 235px;
        }
        .ytree{
            top: 376px;
            left: 235px;
        }
                            /* Columna 4 */
        .rfour{
            top: 90px;
            left: 339px;
        }
        .gfour{
            top: 186px;
            left: 340px;
        }
        .yfour{
            top: 280px;
            left: 339px;
        }
        .bfour{
            top: 378px;
            left: 339px;
        }
                            /* Columna 5 */
        .bfive{
            top: 91px;
            left: 439px;
        }
        .yfive{
            top: 186px;
            left: 444px;
        }
        .rfive{
            top: 282px;
            left: 439px;
        }
        .gfive{
            top: 378px;
            left: 440px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="red-ball rone"></div>
        <div class="red-ball rtwo"></div>
        <div class="red-ball rtree"></div>
        <div class="red-ball rfour"></div>
        <div class="red-ball rfive"></div>
        <div class="yellow-ball yone"></div>
        <div class="yellow-ball ytwo"></div>
        <div class="yellow-ball ytree"></div>
        <div class="yellow-ball yfour"></div>
        <div class="yellow-ball yfive"></div>
        <div class="blue-ball bone"></div>
        <div class="blue-ball btwo"></div>
        <div class="blue-ball btree"></div>
        <div class="blue-ball bfour"></div>
        <div class="blue-ball bfive"></div>
        <div class="green-ball gone"></div>
        <div class="green-ball gtwo"></div>
        <div class="green-ball gtree"></div>
        <div class="green-ball gfour"></div>
        <div class="green-ball gfive"></div>
    </div>
</body>
</html>

const div = document.querySelector (鈥渄iv鈥);
const teffCourses = [鈥llHerCourses ];

teffCourses.forEach (course => {
div.style.background = 鈥減apayawhip鈥; //Un cl谩sico xD
return course;
});

// :3

Que buena explicaci贸n, es uno de los temas que m谩s me cuesta entender, creo que ver茅 esta clase un par de veces m谩s para que me quedo todo claro.

Comparto un v铆deo de Manz sobre position. Tiene un minutaje en el v铆deo por si quer茅is ir al grando.

La propiedad position de CSS (relative, absolute, fixed鈥)


Comparto tambi茅n una serie de v铆deos de Dorian Desings.

POSITION
Relative
Absolute
FIXED
STICKY
Z-Index

Un saludo y gracias.

Aqu铆 mi gran logro:

Me quedo super este ejemplo les comparto para que lo prueben en su navegador.

<!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>
</head>
<style>
    .contenedor{
        height: 300px;
        width: 300px;
        position: relative;
        background-color: green;
        margin: 0 auto;
    }
    
    .cuadrito{
        background-color: yellow;
        height: 30px;
        width: 30px;
        text-align: center;
       line-height: 0px;
        position: absolute;
        top: 135px;
        left: 135px;
    }
    .cuadrito{
        position: initial;
        line-height: 30px;
    }

   

    .contenedor2{
        height: 300px;
        width: 300px;
        position: relative;
        background-color: rgb(110, 173, 110);
        margin: 0 auto;
    }
    .contenedor2 .cuadrito{
        position:inherit;
        line-height: 30px;
    }
</style>
<body>
    <section class="contenedor">

        <div class="cuadrito">
            <p>P</p>

        </div>
    </section>

    <section class="contenedor2">

        <div class="cuadrito">
            <p>P</p>

        </div>
    </section>

</body>
</html>

La Profe Estefany Papayawhip

si ponen en html : lorem *10(o cualquier numero tambien les sale un texto grande), para no ir a una pagina y copiarlo.

![](```

HTML
<div class=鈥済oku鈥>

CSS
.goku img:nth-child(1){
width: 400px;
position: relative;
}

.goku img:nth-child(2){
width: 100px;
position: absolute;
top: 90px;
right: 500px;
}

.goku img:nth-child(3){
width: 100px;
position: absolute;
top: 15px;
left: 300px;

Les recomiendo que primero lean los recursos, que es informaci贸n muy completa y despu茅s vean el video.

La explicaci贸n me pareci贸 muy bien, lo que no entiendo es porque si est谩n explicando algo tan importante como divisiones y pocisionamiento, porque utilizan colores que casi no se pueden diferenciar uno del otro. Porque no utilizar colores totalmente opuestos aunque no combinen...

Al momento de usar el position absolute en un elemento hijo(item ) su padre(container) debe tener un position relative que evitara que su hijo se le escape.

No lo he utilizado en alg煤n proyecto pero se me ocurri贸 este peque帽o ejemplo para que el tercer elemento herede del segundo para posicionarlo

<!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>
    .container {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: aqua;
    }
    .subcontainer {
      position: absolute;
      width: 50px;
      height: 50px;
      right: 0;
      background-color: beige;
    }
    .subsubcontainer {
      position: inherit;
      width: 30px;
      height: 30px;
      background-color: rebeccapurple;
      bottom: 0;
      left: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="subcontainer">
      <div class="subsubcontainer">
      </div>
    </div>
  </div>
</body>
</html>

Me cuesta mucho entender el tema del posicionamiento en CSS. Siento que los elementos absolutos y relativos siempre me toman del pelo. Gracias por esta explicacion. Definitivamente es mucho mas clara y no tenia ni idea que existia el position: sticky.

Les comparto un projecto que hice hace ya algun tiempo donde use 鈥減osition: fixed鈥 para el nav y 鈥減osition: absolute鈥 para el fondo si no me equivoco.

El position static es el que trae por defecto y no se puede alterar.

Me encanto la clase super, la profe explica genial 馃榿

Sin duda al ver los temas por segunda vez le entiendes mas 馃挌

Diferencia de fixed y sticky es que el primero se mantiene siempre fijo en la posici贸n inicial asignada, mientras que sticky, que no necesariamente tiene que estar al inicio, se fija al scrollear y llegar a la posici贸n top, bottom, left o right asignada

Pueden presionar alt + z . Con esto se acomodara mejor el contenido textual.

Amo como Platzi 鈥渃omo reto鈥 se limpia las manos de ense帽ar. De ser as铆 鈥渃omo reto鈥 voy y estudio todo CSS por mi cuenta, gracias.

Realmente los ejercicios me ayudaron bastante a entender el concepto, por lo general no suelo comentar muy a menudo pero sugiero a todos los compa帽eros que realizen los ejemplos que estan en la seccion de abajo del video. La forma de ense帽ar es muy buena por parte de la profesora.

Como aporte, para no ir a otra p谩gina y buscar un texto lorem, puedes hacerlo desde el mismo documento html con Visual Studio Code solamente escribiendo lorem + TAB y automaticamente va a crear un texto falso.

Platzi car

Con inspiraci贸n de RetaxMaster y que el equipo de Platzi que anda patrocinando por ah铆 cosas chidas, se me ocurri贸 poner el logo de Platzi en la mitad de un carro usando CSS as铆 como si lo estuviese patrocinando 馃憞馃従

<h5>Platzi-logo</h5>
<h5>El carro</h5>
  • Primero tenemos que poner la estructura b谩sica de HTML y crear un contenedor con las dos im谩genes
    <div class="contenedor">
        <img src="https://static.platzi.com/media/user_upload/platzi-logo-1bd0e10a-d398-44c8-ab50-201438234b9c.jpg" alt="logo" class="logo">
        <img src="https://static.platzi.com/media/user_upload/Carro-de294497-bbce-4827-8f5c-0b13ddaca28e.jpg" alt="Carro" class="carro">
    </div>
  • Ahora nos vamos al CSS agregamos las posiciones, al contenedor le ponemos relative y al logo absolute, al carro le establecemos un ancho de 1000px y al logo de 300px

  • Para poner el logo en la puerta del carro en este caso podemos usar porcentajes y 50 % justo es la mitad y nos quedar铆a bien

  • Y para ya finalizar y que se vea un poquito m谩s realista le agregamos un opacity de 0.8 al logo

.contenedor{
            position: relative;
        }
        .logo{
            position: absolute;
            width: 300px;
            top: 50%;
            right: 50%;
            opacity: 0.8;
        }
        .carro{
            width: 1000px;
        }

Y ya ahora Platzi anda patrocinando carros de lujo 馃榿

me habria gustado que explicara mas de los ultimos posicionamientos pero espero y les sirva esta img

Notes:

  • position nos ayuda a ubicar un elemento en un espacio determinado
  • Los valores de position pueden ser:
    • relative
    • absolute
    • fixed
    • sticky
    • static
    • initial
    • inherital
  • Un elemento con position absolute debe ser hijo de un elemento con position relative
  • Un elemento con position fixed se quedara estatico donde lo definamos
  • La position static es la posicion por defecto que tienen todos los elementos
  • Los elementos con position sticky suelen darle 鈥渆spacio鈥 a otros elementos con esta misma propiedad de posicion.

Anexo ejercicio realizado:

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Document</title>
<style>
.container{
width: 200px;
height: 200px;
background: darkgreen;
top: 20px;
position: relative;

    }
    .item{

        width: 20px;
        height: 20px;
        background: yellow;
        position: absolute;
        right: 0;
    }

    nav{
        width: 100%;
        height: 60px;
        background: lightgreen;
        top: 0;
        position: fixed;
    }
    ul p {
        position: sticky;
        top: 0;

    }
</style>

</head>
<body>
<nav>

</nav>
<div class="container">
    <div class="item">

    </div>
</div>

<p>
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    
    Why do we use it?
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    
    
    Where does it come from?
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    
    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
    
    Where can I get some?
    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<ul>
<p>Frutas</p>
<li>Peras</li>
<li>Manzana</li>
<li>Sandia</li>

</ul>
<ul>
    <p>Frutas</p>
    <li>Peras</li>
    <li>Manzana</li>
    <li>Sandia</li>

    </ul>
    <ul>
        <p>Frutas</p>
        <li>Peras</li>
        <li>Manzana</li>
        <li>Sandia</li>
    
        </ul>
        <ul>
            <p>Frutas</p>
            <li>Peras</li>
            <li>Manzana</li>
            <li>Sandia</li>
        
            </ul>
            <ul>
                <p>Frutas</p>
                <li>Peras</li>
                <li>Manzana</li>
                <li>Sandia</li>
            
                </ul>
                <ul>
                    <p>Frutas</p>
                    <li>Peras</li>
                    <li>Manzana</li>
                    <li>Sandia</li>
                
                    </ul>
                    <ul>
                        <p>Frutas</p>
                        <li>Peras</li>
                        <li>Manzana</li>
                        <li>Sandia</li>
                    
                        </ul>
                        <ul>
                            <p>Frutas</p>
                            <li>Peras</li>
                            <li>Manzana</li>
                            <li>Sandia</li>
                        
                            </ul>

</body>
</html>

Clase 15 - Posicionamiento en CSS


驴Qu茅 es position en CSS?

  • Es el c贸mo un elemento se posiciona respecto a su elemento padre y el flujo normal del documento.

驴Qu茅 es el flujo normal de un documento?

  • Es el orden en el que los elementos HTML est谩n establecidos en dicho documento.

驴Qu茅 valores puede tener la propiedad position?

  • Static (valor por defecto)
  • Relative.
  • Absolute.
  • Sticky.

驴Qu茅 propiedades desbloqueamos al asignarle a un elemento HTML la propiedad position con alguno de sus valores?

  • Top
  • Bottom.
  • Left.
  • Right.

驴Cu谩l es el comportamiento que tiene un elemento HTML que tenga position static?

  • El elemento respetara el flujo normal del documento, adem谩s no se podr谩n usar las propiedades de movimiento (top, bottom, left y right) que se desbloquean con la propiedad position.

驴Cu谩l es el comportamiento que tiene un elemento HTML que tenga position relative?

  • El elemento respetara el flujo normal del documento y podremos usar las propiedades de movimiento (top, bottom, left y right) para poder manipular la posici贸n del elemento.

驴Cu谩l es el comportamiento que tiene un elemento HTML que tenga position absolute?

  • El elemento no respeta el flujo normal del documento y podremos usar las propiedades de movimiento (top, bottom, left y right) para manipular la posici贸n del elemento.

驴C贸mo debemos de trabajar con position relative y absolute?

  • Lo ideal es que tengamos un elemento padre con el position relative y dentro de 茅l asignemos a los elementos hijo el position absolute. Esto lo hacemos para que seamos capaces de manipular el posicionamiento de los elementos hijos respecto a la posici贸n de su elemento padre. De lo contrario los elementos hijos empiezan a posicionarse respecto a la ra铆z del documento.

驴Cu谩l es el comportamiento que tiene un elemento HTML que tenga position fixed?

  • El elemento no respeta el flujo normal del documento y este se fijar谩 en el lugar que le indiquemos usando las propiedades de movimiento (top, bottom, left y right).

驴Cu谩l es el comportamiento que tiene un elemento HTML que tenga position sticky?

  • El elemento no respetara el flujo normal del documento y este se fijar谩 en el lugar que le indiquemos usando las propiedades de movimiento (top, bottom, left y right) siempre y cuando su contenedor sea visible en pantalla.

8:58 La verdad me pareci贸 que la clase tuvo una carente fundamentaci贸n te贸rica. As铆 que mejor le铆 este art铆culo en donde explican un poquito mejor cada una de estas posiciones. #NeverStopLearning

Despu茅s de ver la clase y leer el aporte de RetaxMaster he entendido un poco mas el tema.
Aqu铆 el resultado del ejercicio dejado por Retax:

Y el codigo:

<!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>
        .container {
            position: relative;
        }
        
        #galleta {
            width: 100px;
            position: absolute;
            top: 10px;
            left: 80px;
        }
        
        #pinsher {
            width: 500px;
        }

    </style>
</head>
<body>
    <div class="container">
        <img id="galleta" src="https://previews.123rf.com/images/adogslifephoto/adogslifephoto1606/adogslifephoto160600083/59099427-bis-pila-de-sabor-de-mantequilla-de-man%C3%AD-saludable-galletas-para-perros-en-forma-de-hueso-de-fabrica.jpg?fj=1" alt="galleta">
        <img id="pinsher" src="https://media.istockphoto.com/photos/mixed-breed-chihuahua-and-miniature-pincher-dog-picture-id138091053" alt="pinsher">
    </div>
</body>
</html>

馃く Existen varias formas para centrar un elemento dentro de su contenedor padre de formas sencillas usando position y lograr cosas como estas: (Lo ver谩n tambi茅n en futuros cursos como el curso pr谩ctico de HTML y CSS):

Pueden ver como el elemento hijo est谩 centrando y adem谩s sobresale del contenedor padre馃檶
Debido a que podemos usar las propiedades top, right, left, y bottom para moverlo. Estas propiedades tambi茅n permiten valores negativos 馃憞:
Peque帽o consejo: Para que sobresalga y se vea perfectamente, coloca el valor de bottom la mitad de la altura de tu item馃槈

Para centrar el elemento, puedes usar alguna de estas formas (existen m谩s, pero est谩s son bastantes sencillas y r谩pidas).

  • Podemos usar la funci贸n calc que permite hacer operaciones matem谩ticas sencillas:

    left: calc(50% - 50px); Podemos usar left o right, esto no importa. Los valores que lleva calc permiten colocar el elemento en el 50% (la mitad) del width. El problema es que coloca el item en la mitad comenzando por un extremo y no por el centro:
    por esto, le restamos la mitad del width de nuestro contenedor馃榿
  • La otra forma es usando el valor de propiedad auto en los margenes de la derecha y la izquierda:
    Pueden ver que en el item le colocamos left yrighten 0 y posteriormente usamos margin-left y margin-right en auto para que los posicione autom谩ticamente en el centro馃く Esta forma es m谩s precisa馃槈

Position


Tenemos diferentes tipos de positon en CSS:

  • static 鈫 posici贸n por defecto de todos los elementos HTML
    • conservan la posici贸n y espacio donde son colocados (est谩ticos). No puede usar los valores: top, right, bottom y left en este position
    • los elementos se quedan est谩ticos al hacer scroll no se desplazan hacia abajo, los elementos se queda est谩ticos donde t煤 los coloques, no se van a mover.
  • absolute 鈫 los elementos permanecen en la posici贸n donde fueron colocados, pero pierden si espacio f铆sico (se sobreponen a los elementos que ocupan dicho espacio), se los puede posicionar mediante los valores: top, right, bottom y left. Se tomar谩 como referencia al contenedor m谩s cercano con posici贸n relativa.
  • relative 鈫 conserva su posici贸n original y espacio f铆sico, pero se le puede posicionar mediante los valores: top, right, bottom y left sin perder si espacio f铆sico.
  • fixed 鈫 pierden su espacio f铆sico y permanecen de forma fija (siguen el scroll, se colocan al lado izquierdo del viewport) se los puede posicionar mediante los valores: top, right, bottom y left
  • sticky 鈫 conservan su espacio f铆sico, pero cuando el scroll los alcanza lo siguen (sin perder su espacio f铆sico), es muy usado para barras de navegaci贸n y se los puedes posicionar mediante los valores: top, right, bottom y left

馃挕 Todas las etiquetas en HTML viene por default con el position: static;

Me gustan esos colores que elige para las clases

Descripci贸n visual de sticky

Buen dia, quiero compartir el siguiente enlace es muy bueno lo estuve estudiando el fin de semana y da ejemplos y guias muy tematicas acerca de como alinear elementos o bloques, espero sea de aporte para todos.

https://www.wextensible.com/temas/css3-alinear/block.html

Me gust贸 lo qur hizo @RetaxMaster y quise hacer algo parecido con Homero, ah铆 lo dejo. 馃槂

<!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>Homerito borracho</title>
    <style>
        .container, #homero {
            width: 900px
        }
        #vaso {
            width: 200px
        }
        .container {
            position: relative;
        }
        #vaso {
            position: absolute;
            top: 540px;
            right: 565px;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <img id="homero" src="https://www.pngfind.com/pngs/m/573-5735640_pensando-png-homero-simpson-pensando-png-transparent-png.png"
        alt="Homero">

        <img id="vaso" src="https://w7.pngwing.com/pngs/656/458/png-transparent-glass-of-beer-illustration-beer-coffee-cup-mug-beer-food-beer-bottle-happy-birthday-vector-images.png"
        alt="Vaso">
    </div>
</body>
</html>
     Interesante aporte, me sorprendi cuando en el posicionamiento, se帽o Estefany coloc贸 position: fide;

por lo cual me pude dar cuenta que el **nav-bar** de Platzi tiene esa caracter铆stica 馃グ

C贸mo les va? espero que fant谩stico, me encanta este m贸dulo. Aqu铆 les comparto como us茅 la position

inherit

:
HTML:

<ul class="list">
        <p class="names">Figures</p>
        <li class="fraction"></li>
        <li class="fraction"></li>
        <li class="fraction"></li>
        <li class="fraction"></li>
        <li class="fraction"></li>
    </ul>

CSS:

 .list {
            position: sticky;
            top: 0;
        }
        .list .fraction:nth-child(2n+1) {
            height: 10px;
            width: 10px;
            background: purple;
            position: inherit; 
            margin-left: 10px;
        }
        .list .fraction {
            height: 10px;
            width: 10px;
            background: yellow;
            position: inherit; 
            right: 0;
        }

Pruebenlo y muestren c贸mo les qued贸!

lorem30 poner eso dentro de una etiqueta y genera 30 palabras de lorem

Una clase muy entretenida y enriquecedora! Gran Profesora Estefy.

Por si el lorem ipsum les queda muy grande verticalmente solo usen el sgte. comando:

Alt + z

Autom谩ticamente se justificara el contenido para que podamos verlo. Solo funciona en VSC.

Los ejemplos en codi.link tienen errores, al menos en los dos primeros casos.

Siempre las cosas est谩n cambiando, por ahora estos son todos los valores de position actualmente. La propiedad position fue introducida en CSS2 y los valores r_elative, absolute, fixed y sticky_ fueron agregados en CSS3. Los valores initial e inherit fueron agregados en CSS4. Aprendizaje constante solamente, nada que temer.

Pregunta Respuesta
驴Cu谩les son los tipos de valores de 鈥淧osition鈥 en CSS? Los tipos de valores de 鈥淧osition鈥 son 鈥淩elative鈥, 鈥淎bsolute鈥, 鈥淔ixed鈥, 鈥淪ticky鈥, 鈥淪tatic鈥, 鈥淚nitial鈥 e 鈥淚nherit鈥
驴Qu茅 permite hacer la propiedad 鈥淧osition: Relative鈥? Permite posicionar un elemento relativo a su posici贸n original. Puede moverse usando propiedades como 鈥渢op鈥, 鈥渞ight鈥, 鈥渂ottom鈥 y 鈥渓eft鈥
驴Qu茅 efecto tiene la propiedad 鈥淧osition: Absolute鈥 en un elemento? Posiciona un elemento en relaci贸n con su contenedor m谩s cercano que tiene una posici贸n 鈥渞elative鈥, 鈥渁bsolute鈥 o 鈥渇ixed鈥. El elemento se retira del flujo normal del documento y se coloca seg煤n las coordenadas especificadas
驴Cu谩l es el prop贸sito de 鈥淧osition: Fixed鈥? Coloca un elemento de manera fija en una posici贸n dentro de la ventana gr谩fica del navegador, lo que significa que permanece en su lugar incluso cuando se hace scroll
驴C贸mo se logra un elemento 鈥淧osition: Sticky鈥 ? Permite que un elemento se pegue a la parte superior o inferior de su contenedor a medida que el usuario hace scroll
驴Qu茅 hace la propiedad 鈥淧osition: Static鈥? Este es el valor predeterminado y coloca el elemento en su posici贸n normal en el flujo del documento. No se ve afectado por las propiedades de posicionamiento o coordenadas
驴Cu谩l es la utilidad de las propiedades 鈥淚nitial鈥 e 鈥淚nherit鈥 en el contexto de 鈥淧osition鈥? 鈥淚nitial鈥 restablece la propiedad de posicionamiento a su valor inicial, mientras que "Inherit" hereda la propiedad de posicionamiento del elemento padre
驴Cu谩l es el prop贸sito del valor 鈥淪ticky鈥 en 鈥淧osition鈥? Este valor combina caracter铆sticas de 鈥淩elative鈥 y 鈥淔ixed鈥. Se comporta como_ 鈥淩elative鈥漘 hasta que se alcanza un punto de desplazamiento determinado, momento en el que se convierte en 鈥淔ixed鈥 y se mantiene fijo
驴Qu茅 se necesita para que un elemento con 鈥淧osition: Sticky鈥 funcione correctamente? Necesita tener hermanos 鈥渟ticky鈥 en el mismo contenedor para que el navegador comprenda a qu茅 elemento debe adherirse
驴C贸mo se llama el concepto que describe el orden de apilamiento de elementos en la visualizaci贸n de la p谩gina? Se llama 鈥淶-index鈥
驴C贸mo se puede usar el 鈥淶-index鈥 para controlar el orden de apilamiento de elementos? Usando la propiedad 鈥淶-index鈥, se puede asignar un valor num茅rico a los elementos para determinar su posici贸n en el eje Z. Los elementos con un valor m谩s alto se superpondr谩n a los elementos con un valor m谩s bajo
驴Qu茅 se debe tener en cuenta al usar 鈥淶-index鈥 en elementos posicionados? Es importante recordar que solo afecta a elementos posicionados (con valores de posici贸n diferentes de 鈥淪tatic鈥) y que s_olo tiene efecto si hay un contexto de apilamiento establecido_
驴Cu谩l es el t茅rmino que se refiere a la propiedad que establece si un elemento debe estar en primer plano o fondo? Es 鈥淐ontexto de apilamiento鈥 (Stacking Context)

Posicionamiento, o como tu ex dir铆a "on tas?". Son todos los elementos que indican d贸nde se encuentra cada elemento html. -position: relative; -top: hace espacio de los pixeles indicados -position: absolute( se adhiere al contenedor m谩s cercano) -nav: fixed(hace que el elemento se quede est谩tico en la p谩gina)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionamiento</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            background-color: peachpuff;
            position: relative;
            top: 20px;
        }
        .item {
            width: 20px;
            height: 20px;
            background-color: darkred;
            position: absolute;
            right: 0;
            top: 180px;
        }
        nav {
            width: 100%;
            height: 60px;
            background-color: darkgrey;
            position: fixed;
            top: 0;
        }
        ul p {
            position: sticky;
            top: 20px;
        }
    </style>
</head>
<body>
    <nav></nav>  
    <div class="container">
        <div class="item">
        </div>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam sint asperiores incidunt minima, officia dicta nihil recusandae eius? Voluptates voluptatem est praesentium temporibus maiores mollitia quis explicabo distinctio, fugit harum!
    Pariatur perferendis eligendi nesciunt! Quidem ex quisquam eum magnam harum rerum sed. Distinctio amet perspiciatis ipsam? Fuga, eligendi. Ipsa dolorum perspiciatis rerum incidunt sapiente in perferendis tenetur numquam porro laborum!
    Magni excepturi deleniti dolorum. Quam natus, in dicta vero facere voluptas! Dolorum, hic asperiores maiores iste vitae velit alias, delectus ad voluptate officiis in dolor est voluptas perferendis? Consequatur, commodi!
    Enim corrupti ipsa animi nobis iste reiciendis quibusdam repellendus. Ducimus illum minima consectetur? Sit possimus sapiente quae temporibus provident, voluptatum aliquam neque. Magnam, nulla repellat voluptatibus sequi eum accusamus incidunt?
    Numquam, distinctio fugiat! Possimus sunt a velit quidem sed itaque repudiandae culpa voluptate est adipisci sit nobis aperiam dolorem voluptatum, suscipit unde reiciendis. Deleniti officiis illum asperiores fuga eos quis!
    Harum quasi rem officiis, porro rerum dolorem reiciendis in saepe reprehenderit est atque dicta repellat non necessitatibus doloribus quibusdam sequi ducimus? Placeat consequatur odit ratione, enim iusto maxime nam eligendi.
    Labore similique a dignissimos, totam vel natus praesentium cumque, sequi magni et nam! Quaerat quia optio unde ratione aperiam. Similique placeat minus maiores dolores maxime cum aut modi nisi asperiores?
    Asperiores quos officia dicta fugit quia consequuntur aspernatur ab! Adipisci aliquam eveniet, possimus suscipit id corrupti dolorem dolor ipsam quam? Tempora, atque odit. Quis labore hic ea. Magnam, sequi quia.
    Illo adipisci, atque ratione cum nisi alias sint et. Incidunt facere ipsa porro voluptatem blanditiis provident sint deserunt quasi? Maiores corporis, tempore animi sit sunt quis commodi itaque dolore fugiat!</p>
    <ul>
        <p>Frutas</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Verduras</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Frutas</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Verduras</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Frutas</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Verduras</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Frutas</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Verduras</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Frutas</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Verduras</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
    <ul>
        <p>Frutas</p>
        <li>Manzana</li>
        <li>Pera</li>
        <li>Sandia</li>
    </ul>
</body>
</html>
  • El posicionamiento en CSS permite controlar la ubicaci贸n y el flujo de los elementos en una p谩gina web. CSS ofrece diferentes tipos de posicionamiento, cada uno con su propio comportamiento y propiedades asociadas. Aqu铆 est谩n los principales tipos de posicionamiento en CSS:
  1. Posicionamiento est谩tico (static):
  • Es el posicionamiento por defecto que tienen todos los elementos.
    Los elementos con posicionamiento est谩tico siguen el flujo normal del documento y no se ven afectados por las propiedades de posici贸n, como top, left, etc.
    Posicionamiento relativo (relative):

2.-El posicionamiento relativo permite desplazar un elemento con respecto a su posici贸n original.

  • Los elementos con posicionamiento relativo mantienen su flujo normal en el documento, pero se pueden ajustar utilizando propiedades como top, bottom, left y right.

  • El espacio vac铆o original del elemento se mantiene, incluso si se desplaza.

3.-Posicionamiento absoluto (absolute):

  • El posicionamiento absoluto permite posicionar un elemento de manera precisa en relaci贸n con su primer padre posicionado o en relaci贸n con la ventana del navegador si no hay un padre posicionado.

  • Los elementos con posicionamiento absoluto se eliminan del flujo normal del documento, lo que significa que otros elementos no los ven ni ocupan espacio en la p谩gina.
    Se utilizan las propiedades top, bottom, left y right para especificar las distancias y ubicaci贸n del elemento posicionado.

4.-Posicionamiento fijo (fixed):

  • El posicionamiento fijo ancla un elemento en una posici贸n fija en relaci贸n con la ventana del navegador, lo que significa que permanece en su lugar incluso cuando se desplaza la p谩gina.
    Los elementos con posicionamiento fijo tambi茅n se eliminan del flujo normal del documento y no ocupan espacio en la p谩gina.

  • Se utilizan las propiedades top, bottom, left y right para especificar las distancias y ubicaci贸n del elemento posicionado.
    Posicionamiento pegajoso (sticky):

  • El posicionamiento pegajoso es una combinaci贸n entre el posicionamiento relativo y fijo.
    El elemento se comporta como posicionamiento relativo hasta que alcanza una posici贸n determinada en la ventana del navegador, y luego se vuelve fijo.

  • Se utiliza la propiedad top, bottom, left o right para establecer el l铆mite donde se vuelve fijo.
    Estos son los principales tipos de posicionamiento en CSS. Cada tipo ofrece diferentes formas de

  • controlar la ubicaci贸n y el flujo de los elementos en una p谩gina web, lo que permite lograr dise帽os m谩s complejos y personalizados.

Les dejo mi link a CodePen donde estuve jugando con los valores de position!

gracias profe鈥

A mi se me hizo mucho mas facil entender con el siguiente video:

https://www.youtube.com/watch?v=BVIdzytAtkg

<!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>
        .container {
            display: flex;

        }
        div{
            margin: 0;
            background-color: red;
            padding-bottom: 20px;
            padding-top: 20PX;
        }
        .container div:nth-child(2){
            padding-left: 10px;
            padding-right: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <section class="container">
    <div>HOLA</div>
    <DIv>MUNDO</DIv>
    </section >
</body>
</html>

Datito Curioso sobre position: initial 鈽濓笍馃


El valor initial no solo se usa en la posici贸n, sino que en realidad puede usarse para cualquier propiedad en CSS ya que se trata de un valor gen茅rico que hace que la propiedad en cuesti贸n vuelva a su valor inicial por defecto.

B谩sicamente, cuando usas initial en una propiedad, est谩s dici茅ndole al navegador que restablezca esa propiedad a su valor inicial o por defecto, lo cual es 煤til cuando quieres deshacer cambios anteriores y asegurarte de que una propiedad tenga el valor que originalmente viene cuando a煤n no se le ha aplicado ning煤n otro estilo.

Por ejemplo, supongamos que tenemos el siguiente c贸digo:

<body>
	<p>Testing <span>this</span></p>
</body>
span {
	color: red;
}

p {
	color: orange;
}

p span {
	color: initial;
}

El resultado ser铆a este:

Ya que al tener el valor initial, el span regresa a su color por defecto, el cual es el negro~

Esto es lo que se me ocurrio a mi! 馃槄

Enlace

Hola Hola! 馃槂
Este fue el ejercicio que realice,

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: rgb(42, 203, 228);
        }
        .box1 {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 400px;
            height: 400px;
            border: none;
            border-radius: 100px;
            background: linear-gradient(400deg, rgb(255, 255, 0) 0%, red 35%, rgba(226, 2, 129, 0.857) 60%, rgb(137, 1, 195) 100%);
        }
        .box2 {
            position: absolute;
            top: 140px;
            left: 140px;
            width: 320px;
            height: 320px;
            border: 30px solid white;
            border-radius: 100px;
        }
        .box3 {
            position: absolute;
            top: 225px;
            left: 225px;
            width: 150px;
            height: 150px;
            border: 25px solid white;
            border-radius: 100px;
        }
        .box4 {
            position: absolute;
            top: 200px;
            left: 370px;
            width: 15px;
            height: 15px;
            border: 15px solid white;
            border-radius: 100px;
        }

        p {
            position: absolute;
            bottom: 20px;
            right: 180px;
            font-size: 40px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <p>INSTAGRAM</p>
    </div>
</body>
</html>
  • Este es mi aporte utilizando la propiedad relative y absolute

Para casos espec铆ficos, el posicionamienrto suele resultar muy 煤til! 馃榿

.

La caja de comentarios de platzi (esta) deberia estar: position:sticky;

Pista de carreras usando
posicionamiento en CSS
Code
https://tinyurl.com/5n7rvf99
Preview
blob:https://codi.link/6984ac26-22e9-4b2a-9ed6-7817335ca5d6

Posicionamiento en CSS

El position nos ayuda a ubicar elementos

Relative

Al posicionar un elemento en relative, este conserva su espacio en el flujo
y es posicionado con relaci贸n a s铆 mismo

Absolute

En Absolute el elemento se posiciona sin conservar su espacio en el flujo(contrario de relative)
y su posici贸n va a ser respecto al viewport o al elemento que lo contenga si este est谩 posicionado.

Fixed:

Posiciona un elemento pero el contenido se ajusta en su posici贸n y este elemento posicionado en fixed queda fijado鈥>Relaci贸n con ABSOLUTE

Sticky:

Es una combinaci贸n entre FIXED y RELATIVE, mantiene su espacio en el flujo y se puede definir d贸nde queda fijado鈥>Relaci贸n entre fixed y relative

Not茅 algo y es que cuando la profesora le coloca el position: fixed al nav es como si 鈥渟ubiera鈥 el div del ejemplo de position relative y absolute. 驴C贸mo solucionar eso?

para evitar copiar el lorem, pueden escribir lorem*8 y darle tab que se autocopleta

En CSS, puedes heredar el posicionamiento de un elemento padre de varias maneras. A continuaci贸n te presento dos ejemplos:

Utilizando la propiedad position 鈥渋nherit鈥:

.padre {
  position: relative;
}

.hijo {
  position: inherit;
}

En este ejemplo, se establece la propiedad position del elemento padre en 鈥渞elative鈥. Luego, se establece la propiedad position del elemento hijo en 鈥渋nherit鈥. Esto har谩 que el elemento hijo herede el posicionamiento del elemento padre, es decir, que adquiera el valor 鈥渞elative鈥 para la propiedad position.

Utilizando la propiedad position 鈥渁bsolute鈥:


.padre {
  position: relative;
}

.hijo {
  position: absolute;
  top: 0;
  left: 0;
}

En este ejemplo, se establece la propiedad position del elemento padre en 鈥渞elative鈥 y la propiedad position del elemento hijo en 鈥渁bsolute鈥. Adem谩s, se establecen las propiedades top y left en 鈥0鈥 para el elemento hijo. Esto har谩 que el elemento hijo se posicione en la esquina superior izquierda del elemento padre, independientemente de d贸nde se encuentre el elemento


UN MICHI DURMIENDO Y SONA脩DO QUE ESTA DURMIENDO
.
Aqui el CODIGO:
HTML:

.
CSS:

https://youtu.be/1F_Q5NQBkyU

solo quisiera hacer una aclaraci贸n, botton es 鈥渁bajo鈥, la traducci贸n de debajo es under.

POSICIONAMIENTO EN CSS

position: static; (default)

  • Hace que elemento se mantenga dentro del flujo normal del HTML.
  • En la jerga del CSS no se considera que este valor este posicionado, ya que el navegador por defecto (user-agent) hace que las etiquetas tengan este valor por defecto.
  • Sirve normalmente en el uso de media-query y JS para hacer devolver el elemento al flujo normal.
  • No se ve afectado por: *top*, *bottom*, *left*, *right*y *z-index*

position: relative;

  • El elemento se vuelve relativo a tu posici贸n y NO ROMPE LA MAQUETACI脫N
  • Mantiene su espacio anterior luego de aplicar *top*, *bottom*, *left*, *right* o*z-index*
  • En caso de usar % se toma como base el contenedor padre y este tiene que tener una altura definida (de no tenerlo no se vera afectado por *top*, *bottom*, *left*, *right* 鈥渘o se mueve de posici贸n鈥)

position: absolute;

  • El elemento pierde el espacio dentro del flujo pero se posiciona por default en donde se encontraba.
  • Tomara como base el primer ancestro directo que este posicionado ****(relative, absolute o fixed) en caso no tenga se posiciona seg煤n el <body>.

position: fixed;

  • Siempre toma como base el viewport "pantalla鈥
    • width: 100% = Ancho total de la pantalla
    • height: 100% = Alto total de la pantalla
  • El elemento no har谩 scroll se mantiene fijo en su posici贸n

El est谩ndar de CSS define cinco modelos diferentes para posicionar una caja:

Posicionamiento normal o est谩tico: se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario.
Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una caja seg煤n el posicionamiento normal y despu茅s desplazarla respecto de su posici贸n original.
Posicionamiento absoluto: la posici贸n de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la p谩gina ignoran la nueva posici贸n del elemento.
Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posici贸n en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la p谩gina en la ventana del navegador.
Posicionamiento flotante: se trata del modelo m谩s especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la l铆nea en la que se encuentran.

buena explicacion

Tenemos diferentes herramientas que nos ayudan en el posicionamiento de elementos en un espacio determinado:

  • Relative
  • Absolute (El objeto va a estar limitado al elemento el cual loo contenga)
  • Fixed (deja un elemento fijo)

Encara Messi

El position: fixed me quita el scroll, 驴Qu茅 debo hacer para que me funcione?

Apliqu茅 la posici贸n heredada 馃榿, cre茅 otro hijo item (que herededar谩 la position: relative de su padre .container mediante la propiedad position:inherit) y a su hijo item, le d铆 una position:absolute para centrarlo con las propiedades bottom y left.

<!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>Posicionamiento</title>
    <style>
        div.container{
            width: 200px;
            height: 200px;
            background: peachpuff;
            position: relative;
            top:20px;
            /*bottom: 100px;*/
            left: 40px;
        }
        div.item{
            width: 20px;
            height: 20px;
            background:hotpink;
            position:absolute;
            right: 0;
        }
       
        div.item-padre{
            height: 80px;
            width: 200px;
            background: red;
            position: inherit;/*heredando la posici贸n del padre, es decir: relative*/
            top: 40px;

        }
        div.item-hijo{
            height: 40px;
            width: 40px;
            background: yellow;
            position:absolute;/*su posici贸n ser谩 en relaci贸n al item-padre*/
            bottom:20px;
            left: 80px;
        }
    </style>
</head>
<body>
    <nav></nav>
    <div class="container">
        <div class="item"></div>
        <div class="item-padre">
            <div class="item-hijo"></div>
        </div>
    </div>
</body>
</html>

Para los que utlizamos la pantalla dividida como la profe les puede servir este tip馃槑 iremos a la opcion de la parte superior izquierda de la pantalla (en los tres puntos) le daremos en la opcion de 鈥淰iew鈥 y luego en 鈥淲orp Wrap鈥 y este nos acomodara todo el texto y codigo que ingresemos en nuestro visual studio code y asi trabajar mucho mas comodo!!!

Posicionamiento en CSS

Este nos ayuda a ubicar elementos, se agrega la propiedad 鈥減osition: <tipo/>鈥

Relative: Pone un elemento en un determinado lugar sin que este fijo. Se puede mover con top, right, left, button

Absolute: Sirve para fijar un elemento. Se puede fijar dentro del body o dentro de un contenedor con relative.

Fixed: Sirve para fijar un elemento en la pantalla. Es decir, al hacer scroll este nos seguir谩. Fixed es fijo en ingles.

Sticky: Este espera que pasemos por encima para fijarse en la pantalla hasta que pasemos a otro elemento sticky. Sticky es pegajoso en ingles.

Resumen:
Relative -> se mueve libre en el body
Absolute -> se mueve dentro de un relative. Puede ser el body o un contenedor
Fixed -> permanece en la pantalla con nosotros
Sticky -> nos sigue cuando pasamos por el hasta que encontremos otro sticky