Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Posicionamiento en CSS

15/23
Recursos

Aportes 73

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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 😼.

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.

The Z-index


Static position


Absolute position


Relative position


Fixed position

Positioning in web design

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






<!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>

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!!

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…

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

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.

const div = document.querySelector (“div”);
const teffCourses = […allHerCourses ];

teffCourses.forEach (course => {
div.style.background = “papayawhip”; //Un clásico xD
return course;
});

// :3


😂😂😂

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 “position: fixed” para el nav y “position: absolute” para el fondo si no me equivoco.

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

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>

Anexo ejercicio realizado:

<!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{
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>

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 “margen” 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 “position: relative;” esto es lo que pasa
.

.
El elemento se mueve relativo al body y no al contenedor que queremos.
.
Agregar el “position: relative” al contenedor hará que los elementos dentro de dicho contenedor se muevan relativo al dicho contenedor.

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ó!

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 “espacio” a otros elementos con esta misma propiedad de posicion.

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 😁

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.

Excelente clase! Tuve problemas con el position: sticky, no se pegaba a la parte superior. Para solucionarlo tuve que agregarle un top:0; . Espero que les sea de utilidad!

Hago un aporte:
POSITION: RELATIVE; Es la ubicacion del elemento RESPECTO a su position por default. Si el elemento, segun el flujo de trabajo esta en la parte central izquierda, con position relative su nueva ubicacion sera respecto a la definida por defecto.

POSITION: ABSOLUTE; La posicion del elemento dependera de su contenedor. Si el contenedor esta en todo el centro, con esta propiedad el elemento “hijo” se ubicara de acuerdo al padre! No al body.

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

Ejemplo con la posición de inicio "sticky" (position: sticky). Cuando hay listas, se puede observar el efecto de cada primer elemento de cada contenedor cuando el scroll va bajando.

El elemento contenedor "absoluto" se adhiere al elemento contenedor "relativo" mas cercano, solo puede posicionarse dentro del espacio que abarca ese elemento "relative".

Mi práctica de position. Gracias a la teacher por su pedagogía y al buen complemento de Retaxmaster!
.
.
.

Mi ejercicio del michi

<a href=“https://ibb.co/C0y4wzh”><img src=“https://i.ibb.co/gg8Qr3z/Whats-App-Image-2022-04-27-at-11-30-04-PM.jpg” alt=“Whats-App-Image-2022-04-27-at-11-30-04-PM” border=“0”></a>

La propiedad position: inherit fuerza al elemento a heredar el valor de la propiedad position del elemento padre.

p. ej. En el siguiente código el elemento div con la clase child hereda una posición absolute de su elemento padre, el div con clase father.

Es decir que el elemento .child va a posicionarse en un área registringida por el tamaño de su bloque contenedor, .father. De igual forma, .father se posiciona en un área registringida por el tamaño de .grandpa.



Renderizado.

Aquí mi gran logro:


Logre realizar los ejemplos de la clase, y con los cuadros logre notar la función del inherit

si tomo position inherit se va a la derecha

y con position initial toma la posicion que si ningun estilo tendria

   <style>

        .contenedor div {
            position: relative;
            left: 100px;
            height: 200px;
            width: 200px;
            background-color: cyan;
            margin: 10px;
        }
        .interno {
            width: 100px;
            height: 100px;
        }


    </style>
</head>
<body>

    <div class="contenedor">
        <div >#1

            <section class="interno" style="margin: 0; background-color: blue; position: initial; left: 500px;" >
                

            </section>
        </div>
        <div>#2</div>
        <div>#3</div>
        <div>#4</div>
    </div>
</body>

En la prueba del ejemplo, sobre todo con el posicionamiento sticky, noté que en la parte del encabezamiento, al dar el scroll como que esa palabra que tiene el efecto del sticky se sale a medida que se desplaza la página, lo cual se me hizo raro.

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.

Un caso en el que me ha ayudado lo de position relative y absolute es cuando quieres usar una imagen encima de otra de fondo.

Otro caso cuando se puede usar position sticky es cuando quieres que la navbar o barra de menú siempre se quede en la parte de arriba aunque hagan scroll.

Excelente ❤️

No tenia idea de posicionamiento sticky😳

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>

cual es la diferencia entre usar un margin o padding top y usar mover el elemento con position top?

profe que paso ? me quede esperando el ejemplo de static, initial y inherit. sera buscarlo por otro lado

   <style>
.container-relative{
      width: 200px;
      height: 200px;
      background-color: lightcoral;
      position: relative;
    }

    .container-relative > div {
      width: 100px;
      height: 100px;
      background-color: lightgray;
      position: inherit;
    }

    .element-absolute{
      width: 50px;
      height: 50px;
      background-color: lightseagreen;
      position: absolute;
      right: 0;
    }
  </style>

  <div class="container-relative" >
    <div>
      <div class="element-absolute">

      </div>
    </div>
  </div>

Indica que el elemento hererada las propiedades del elemento padre.

<!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 {
            color: tomato;
        }
        article {
            color: rgb(64, 219, 212);
        }
        .diferente article {
            color: inherit;
        }
    </style>
</head>
<body>
    <section>
        <article>
            texto
        </article>
    </section>
    <section class="diferente">
        <article>
            texto
        </article>
    </section>
    <section>
        <article>
            texto
        </article>
    </section>
    
</body>
</html>

estos son mis aportes (a la carrera B)
aver
en style podemos ponerle sub indices
por ejemplo si hicimos un div
y adentro otro div
podemos hacer que el primer div sea contenedor
y el segundo contenido haci que podemos moverlo dentro de este
(usar esto para menu principal de parte de arriba)

luego
el nav con position relative se va mover conforme al el scroll
mientras que position absolute no se va mover
es como si pusieramos un cuadrado encima de el scroll

Tambien
si hacemos un ul
adentro tenemos subcaregorias
como p
h1 etc
entonces podemos hacer en style
un subindice en style que me diga que puedo
hacer con esto como los subtemas de div per
haci mira ul p {
}
haci vamos a hacer cosas con los p que esten adentro de ul
poner nav antes de cualquier cosa
position styki
va cambiar solo y solo si temenos dieferntes cosas de una sola cosa
en este caso varios p
sino seria static
joder tenemos que tambien pegarlos con top
digo con top: 0;
para que estos sirvan no awebo que si

posiciones de css

🤯 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😉

Con visual studio code puedes agilizar la creación de algunas estructuras usando la extensión emmet (asegurate de tener instalada la extensión emmet)
Ejemplo:

:

Para el caso de ejercicio propuesto tendríamos:

ul>li*3 + presionar tap

Resultado:

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

Para centrar verticalmente usaba:

.padre {
display: table;
width: 100vw;
height: 100vh;
}
.hijo{
display: table-cell;
vertical-align: middle;
width: 100vw;
height:20vh;
}

Está genial! hasta ahora solo he profundizado en cómo utilizar absolute y relative, pero es súper interesante el tema.

varios yisus bailando la macarena xd
#ejercicios mas interactivos

Este es un códio mostrandol caracteristica de inherit

<!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>
.Navegador /* Este es el estilo del elemento Padre */

    {
        background: rgb(2, 178, 209); 
        font-size: 20px; /* Este es el atributo que se heredará en lo hijos impares */
        position:sticky;
        top: 0;

    }

.Navegador .Divisiones:nth-child(2n+1) /* Para los hijo impares se heredarà el tamaño de letra del padre */
{
    font-size: inherit;
    background: yellow;
    width: 250px;
    height: 50px;
}

.Navegador .Divisiones:nth-child(2n+2) /* Para los hijos impares el tipo de letra se define en 16 px */
{
    font-size: 16px;
    background: rgb(0, 60, 255);
    width: 250px;
    height: 50px;
}
</style>


<body>

<nav class="Navegador">Tamaño de letra del elemento Padre
<div class="Divisiones">Tamaño de Letra de Hijo 1 </div>
<div class="Divisiones">Tamaño de Letra de Hijo 2</div>
<div class="Divisiones">Tamaño de Letra de Hijo 3</div>
<div class="Divisiones">Tamaño de Letra de Hijo 4</div>
</nav>

</body>
</html>

Tip: Pueden generar Lorem Ipsum desde Code.
Escriben “Lorem” + “cantidad de palabras” + Tab
Ej. Lorem6 (presionen Tabulador)

Lorem ipsum dolor sit amet consectetur.

definitivamente este curso esta diseñado para entender de una manera muy fácil e intuitiva .muchas gracias

Esté código lo tenia en la universidad ya hace como 3 años.
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="./style.css" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, user-scalable=no"
    />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript">
      $(window).on("scroll", function () {
        if ($(window).scrollTop()) {
          $("nav").addClass("black");
        } else {
          $("nav").removeClass("black");
        }
      });
      $(document).ready(function () {
        $(".menu h4").click(function () {
          $("nav ul").toggleClass("active");
        });
      });
    </script>
  </head>
  <body>
    <div class="responsive-bar">
      <div class="logo">
        <img
          src="https://www.unab.edu.co/sites/default/files/1-LOGO-WEB_0.png"
          alt="logo"
        />
      </div>
      <div class="menu">
        <h4>Menu</h4>
      </div>
    </div>
    <nav>
      <div class="logo">
        <img src="https://www.unab.edu.co/sites/default/files/1-LOGO-WEB_0.png""
        alt="logo">
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portafolio</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section class="sec1"></section>
    <section class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Blandit aliquam
        etiam erat velit scelerisque in dictum. Vestibulum sed arcu non odio
        euismod lacinia. Aliquet bibendum enim facilisis gravida neque. Id leo
        in vitae turpis massa sed elementum tempus egestas. Vivamus arcu felis
        bibendum ut tristique et. Lectus sit amet est placerat. Viverra orci
        sagittis eu volutpat odio facilisis mauris sit amet. Commodo quis
        imperdiet massa tincidunt. Arcu dictum varius duis at consectetur lorem
        donec massa sapien. Imperdiet sed euismod nisi porta lorem mollis
        aliquam. Habitant morbi tristique senectus et netus et malesuada fames
        ac.<br />

        Morbi leo urna molestie at elementum. Nisl purus in mollis nunc sed id
        semper risus in. Sed euismod nisi porta lorem mollis aliquam ut
        porttitor. Pharetra sit amet aliquam id diam maecenas. Felis donec et
        odio pellentesque diam volutpat. Non arcu risus quis varius quam quisque
        id. Sit amet facilisis magna etiam tempor orci eu. Placerat in egestas
        erat imperdiet sed euismod nisi porta. Odio pellentesque diam volutpat
        commodo sed egestas egestas fringilla phasellus. Aenean pharetra magna
        ac placerat. Auctor elit sed vulputate mi sit amet mauris commodo quis.
        Laoreet sit amet cursus sit amet. Risus nullam eget felis eget nunc
        lobortis. Curabitur vitae nunc sed velit dignissim sodales ut eu sem.<br />

        Blandit cursus risus at ultrices mi tempus. Auctor urna nunc id cursus
        metus aliquam eleifend mi in. Ut lectus arcu bibendum at varius vel
        pharetra vel turpis. At ultrices mi tempus imperdiet nulla malesuada.
        Fringilla phasellus faucibus scelerisque eleifend donec pretium
        vulputate sapien nec. Faucibus vitae aliquet nec ullamcorper sit.
        Blandit massa enim nec dui nunc mattis. Ultricies tristique nulla
        aliquet enim tortor at. Ac tortor dignissim convallis aenean et tortor.
        Fusce ut placerat orci nulla pellentesque dignissim. Gravida quis
        blandit turpis cursus in hac habitasse platea. In massa tempor nec
        feugiat nisl. Sit amet consectetur adipiscing elit ut aliquam purus sit.
        Egestas maecenas pharetra convallis posuere morbi leo urna. Amet tellus
        cras adipiscing enim.
      </p>
    </section>
    <section class="sec2"></section>
    <section class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Blandit aliquam
        etiam erat velit scelerisque in dictum. Vestibulum sed arcu non odio
        euismod lacinia. Aliquet bibendum enim facilisis gravida neque. Id leo
        in vitae turpis massa sed elementum tempus egestas. Vivamus arcu felis
        bibendum ut tristique et. Lectus sit amet est placerat. Viverra orci
        sagittis eu volutpat odio facilisis mauris sit amet. Commodo quis
        imperdiet massa tincidunt. Arcu dictum varius duis at consectetur lorem
        donec massa sapien. Imperdiet sed euismod nisi porta lorem mollis
        aliquam. Habitant morbi tristique senectus et netus et malesuada fames
        ac.<br />

        Morbi leo urna molestie at elementum. Nisl purus in mollis nunc sed id
        semper risus in. Sed euismod nisi porta lorem mollis aliquam ut
        porttitor. Pharetra sit amet aliquam id diam maecenas. Felis donec et
        odio pellentesque diam volutpat. Non arcu risus quis varius quam quisque
        id. Sit amet facilisis magna etiam tempor orci eu. Placerat in egestas
        erat imperdiet sed euismod nisi porta. Odio pellentesque diam volutpat
        commodo sed egestas egestas fringilla phasellus. Aenean pharetra magna
        ac placerat. Auctor elit sed vulputate mi sit amet mauris commodo quis.
        Laoreet sit amet cursus sit amet. Risus nullam eget felis eget nunc
        lobortis. Curabitur vitae nunc sed velit dignissim sodales ut eu sem.<br />

        Blandit cursus risus at ultrices mi tempus. Auctor urna nunc id cursus
        metus aliquam eleifend mi in. Ut lectus arcu bibendum at varius vel
        pharetra vel turpis. At ultrices mi tempus imperdiet nulla malesuada.
        Fringilla phasellus faucibus scelerisque eleifend donec pretium
        vulputate sapien nec. Faucibus vitae aliquet nec ullamcorper sit.
        Blandit massa enim nec dui nunc mattis. Ultricies tristique nulla
        aliquet enim tortor at. Ac tortor dignissim convallis aenean et tortor.
        Fusce ut placerat orci nulla pellentesque dignissim. Gravida quis
        blandit turpis cursus in hac habitasse platea. In massa tempor nec
        feugiat nisl. Sit amet consectetur adipiscing elit ut aliquam purus sit.
        Egestas maecenas pharetra convallis posuere morbi leo urna. Amet tellus
        cras adipiscing enim.
      </p>
    </section>
  </body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
  font-size: sans-serif;
}

.responsive-bar {
  display: none;
}

nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  padding: 10px 100px;
  box-sizing: border-box;
  transition: 0.5s;
}

nav.black {
  background: rgba(0, 0, 0, 0.8);
  height: 80px;
  padding: 10px 50px;
}

nav .logo {
  float: left;
}

nav .logo img {
  height: 80px;
  transition: 0.5s;
}
nav.black .logo img {
  height: 60px;
}

nav > ul {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  float: right;
}

nav > ul > li {
  list-style: none;
  display: inline;
}

nav > ul > li > a:hover {
  background: #f00;
  color: #fff;
}

nav > ul > li > a {
  color: #262626;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 80px;
  padding: 5px 20px;
  transition: 0.5s;
  font-family: "Montserrat", sans-serif;
}

nav.black > ul > li > a {
  color: #fff;
  line-height: 60px;
  font-family: "Montserrat", sans-serif;
  font-family: "Montserrat", sans-serif;
}

section.sec1 {
  width: 100%;
  height: 100vh;
  background-image: url(https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size: cover;
}

section.content {
  margin: 0;
  padding: 0;
  font-size: 1.1em;
}

section.sec2 {
  width: 100%;
  height: 100vh;
  background: url(https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size: cover;
}

@media (max-width: 768px) {
  .responsive-bar {
    display: block;
    width: 100%;
    height: 60px;
    background: #262626;
    position: fixed;
    top: 0;
    left: 0;
    padding: 5px 20px;
    box-sizing: border-box;
    z-index: 1;
  }
  .responsive-bar .logo img {
    float: left;
    height: 50px;
  }
  .responsive-bar .menu h4 {
    float: right;
    color: #fff;
    margin: 0;
    padding: 0;
    line-height: 50px;
    cursor: pointer;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
  }
  nav {
    padding: 0;
  }
  nav,
  nav.black {
    background: #262626;
    height: 60px;
    padding: 0;
  }
  nav .logo {
    display: none;
  }

  nav ul {
    position: absolute;
    width: 100%;
    top: 60px;
    left: 0;
    background: #262626;
    float: none;
    display: none;
  }

  nav ul.active {
    display: block;
  }

  nav ul li {
    width: 100%;
  }

  nav ul li a {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
    line-height: 30px !important;
    color: #fff;
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
  }

  nav > ul {
    display: none;
  }
  nav > ul > li {
    display: block;
    text-align: center;
  }
  .active {
    display: block;
  }
}

Nice Class! 😀

Pienso que el posicionamiento inherit podría servir para hacer diseños fractales

<!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: 100px;
        height: 100px;
        background-color: orange;
      }
      .subsubcontainer {
        position: inherit;
        width: 50px;
        height: 50px;
        background-color: rebeccapurple;
      }
      .subsubsubcontainer {
        position: inherit;
        width: 25px;
        height: 25px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="subcontainer">
        <div class="subsubcontainer">
          <div class="subsubsubcontainer"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Position sticky

el IDE de VSCODE te trar shortcuts que te ayudan a horrar un par de lineas, en este caso, los <li>, si pones ul>li*n veces que necesites un li, VSCODE los pondra por ti, este es mi pequeño aporte 💚

Visual studio code marca como error lo siguiente:
Microsoft edge no aceptra etiquetas <p> dentro de etiquetas <ul>

nel!!

genial!!!

Está clase se me hizo muy gratificante por todos los elementos vistos. Thanks