Posicionamiento en CSS

👇 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.

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

😂😂😂

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.

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…

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 (“div”);
const teffCourses = […allHerCourses ];

teffCourses.forEach (course => {
div.style.background = “papayawhip”; //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.

Aquí mi gran logro:

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.

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>

Esto es lo que se me ocurrio a mi! 😅

Enlace

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>

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=“goku”>

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.

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.

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 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 “como reto” se limpia las manos de enseñar. De ser así “como 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 👇🏾

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

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>

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

Aqui dejo mi ejercicio de posicionamiento

Aquí dejo mi aporte de cómo usar la propiedad ‘position: inherit’:
.

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

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

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.

https://developer.mozilla.org/es/docs/Web/CSS/position

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 code pen practice
.

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

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.

\
• \Inicio\\
\
• \Acerca de\\
\
• \Servicios\\
\
• \Contacto\\
\

Inicio\

Contenido de la sección de inicio.\

Acerca de\

Contenido de la sección acerca de.\

Servicios\

Contenido de la sección de servicios.\

Contacto\

Contenido de la sección de contacto.\

y \
• ): Los enlaces de navegación están organizados en una lista sin orden (\
  ), con cada enlace en un elemento de lista (\
  • ). Estilos CSS: Se aplica un fondo oscuro al bloque de navegación para distinguirlo visualmente. Los elementos de la lista se muestran en línea horizontalmente utilizando display: flex. Resumen \<nav>: Define una sección de navegación en una página web. Beneficios: Mejora la estructura semántica, SEO, accesibilidad y organización del contenido. Uso Común: Contener enlaces de navegación principales en un sitio web, tales como menús, barras de navegación y enlaces internos. Utilizar la etiqueta \<nav> es una práctica recomendada para mejorar la claridad y accesibilidad de tus páginas web. nav { width: 100%; height: 60px; background: blue; position: fixed; } Sirve para mantener la linea en una posición fija aunque se haga scroll position sticky es para por ejemplo dejar algún texto hasta arriba aun asi hagas scroll

genial!

El posicionamiento en CSS se refiere a cómo los elementos HTML se colocan y organizan en el espacio de la página web y mediante la propiedad position se establece en que punto de la página comenzará a posicionarse.
**Static: **
El posicionamiento predeterminado de cada elemento en HTML es static, incluso si este valor no ha sido declarado. Todo elemento estático se coloca alineado con la parte superior izquierda en el cuerpo del documento podemos ajustar su posición con respecto a su posición normal en el flujo del documento. Utilizando las propiedades top, right, bottom y left
**Sticky: **
Este tipo de posicionamiento se utiliza cuando queremos que un elemento se posicione en un lugar específico y al hacer scroll, se quede de forma fija donde se le dice que se quede pegado, a pesar del scroll que pueda haber dentro de su contenedor

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.

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…

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

Hola Hola! 😃
Este fue el ejercicio que realice,

Para casos específicos, el posicionamienrto suele resultar muy útil! 😁

.

Mis apuntes en Notion💚

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 “subiera” 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 “inherit”:

.padre {
  position: relative;
}

.hijo {
  position: inherit;
}

En este ejemplo, se establece la propiedad position del elemento padre en “relative”. Luego, se establece la propiedad position del elemento hijo en “inherit”. Esto hará que el elemento hijo herede el posicionamiento del elemento padre, es decir, que adquiera el valor “relative” para la propiedad position.

Utilizando la propiedad position “absolute”:

.padre {
  position: relative;
}

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

En este ejemplo, se establece la propiedad position del elemento padre en “relative” y la propiedad position del elemento hijo en “absolute”. 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:

solo quisiera hacer una aclaración, botton es “abajo”, la traducción de debajo es under.

POSICIONAMIENTO EN CSS