Tengo una duda, el contenedor padre de un absolute debe ser siempre relative? Ya que el profesor mencionó que los -top, bottom, left, rig...

Carlos Massarino

Pregunta

student•hace 4 años

Tengo una duda, el contenedor padre de un absolute debe ser siempre relative? Ya que el profesor mencionó que los -top, bottom, left, right- de un absolute tomarán de referencia al contenedor más cercano con posición relativa.

Estaría bien entonces así, o no es necesario el relative? :

<!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">
    <link rel="stylesheet" href="./style.css">
    <title>Ejercicio Posicionamientos</title>
</head>
<body>
    <main class="main-style">
        <header class="header-style">
            <p class="txt-ejemplo-style">Texto de ejemplo</p>   
        </header>
        <p class="txt-main-style">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo obcaecati assumenda nulla amet sed! Quo nisi sed ducimus! Ex earum placeat vitae, corrupti unde deleniti velit esse. Eveniet, architecto maiores?Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, pariatur nam sequi repellendus odit reiciendis voluptatum aspernatur est quae, repellat atque. Dolores, magnam perspiciatis sint explicabo consequatur voluptate tempore doloribus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo obcaecati assumenda nulla amet sed! Quo nisi sed ducimus! Ex earum placeat vitae, corrupti unde deleniti velit esse. Eveniet, architecto maiores?Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, pariatur nam sequi repellendus odit reiciendis voluptatum aspernatur est quae, repellat atque. Dolores, magnam perspiciatis sint explicabo consequatur voluptate tempore doloribus!</p>
    </main>
</body>
</html>

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    font-size: 62.5%;
    font-family:Arial, Helvetica, sans-serif;
}

.main-style {
    background-color: rgb(212, 203, 203);
    border-radius: 4rem;
    border: 1px solid;
    position: relative;
    width: 40%;
    min-width: 150px;
    margin: 10% auto;
    padding: 10rem 2rem;
}

.header-style {
    background-color: red;
    border-radius: 1rem;
    border: 1px solid;
    width: 60%;
    padding: 2rem;
    text-align: center;
    position: absolute;
    left: 8vw;
    top: -5vh;
    font-weight: bold;
}

.main-style  p {
    font-size: 1.5rem;
}

Fredy Daniel Flores Lemus

student•hace 4 años

Hola CMassarino, Cuando un elemento es position:absolute siempre es relativo a algo, en los casos cuando el padre es position:relative, es relativo al padre, sin embargo cuando el padre no es position:relative busca otro ancestro que si sea position:relative. Y si no encuentra ninguno termina siendo relativo al html. ¿Qué significa que sea relativo? Esto significa en que punto estara su top:0 y su left:0, espero haberte ayudado ;)

Tengo una duda, el contenedor padre de un absolute debe ser siempre relative? Ya que el profesor mencionó que los -top, bottom, left, rig...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]