2

Recién terminé de generar un efecto con HTML y CSS.

Es el siguiente:

    .contenido > section 
    {
        background-color : rgb(16, 100, 16);
        border-radius: 20px;
        padding : 10px;
        margin-right : 200px;
        margin-left: 50px;
        margin-top : 100px;
        color : #fff;
        transition-property: box-shadow, background-color;
        transition-duration : .3s
    }
    
    
    .contenido > section:hover 
    {
        background-color : rgb(27, 110, 27);
        box-shadow : 0px 0px 5px 5px rgb(44, 138, 44);
    }
    
    
    
    section > h2
    {
        text-align : center;
    }
    
    /* ----------------------------------------------------- Universidades Section */
    
    
    .category_container
    {
        height              : 20em;
        margin              : 10px;
        padding             : 10px;
        border-radius       : 20px;
        overflow            : hidden;
        transition-property : height;
        transition-duration : .5s;
    }
    
    .category_name
    {
        background-color    : #0f0;
        position            : relative;
        text-align : center;
        display             : inline;
        border-radius       : 20px;
        padding             : 2em;
        border : 5px inset rgb(42, 206, 42);
        top                 : 45%;
        left                : 45%;
        color               : #000;
        transition-property: left;
        transition-duration : .5s;
    }
    
    .universities
    {
        display             : inline-flex;
        flex-direction      : column;
        align-items         : center;
        padding             : 2em;
        position            : relative;
        background-color    : #0f0;
        left                : 110%;
        border-radius       : 20px;
        transition-property :  left;
        transition-duration : .5s;
    }
    
    
    
    .universities > *
    {
        margin : 15px;
        padding : 10px;
        border-radius: 10px;
        color : #000;
        background-color : rgb(0, 255, 0);
        transition-property: background-color, transform;
        transition-duration : .3s;
    }
    
    .category_container:hover > .universities
    {
        left : 16em;
    }
    
    @media (max-width : 1500px)
    {
        .category_container:hover > .universities
        {
            left : 1em;
        }
    }
    
    .category_container:hover
    {
        height: 600px;
    }
    
    .category_container:hover > .category_name
    {
        left : -50%;
    }
    .universities > *:hover
    {
        background-color : rgb(47, 180, 47);
        transform : scale(1.1, 1.1)
    }
    
    
    
    /* ----------------------------------------------------- Universidades Section */
<!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="css.css">
        <title>Document</title>
    </head>
    <body>
        <div class="contenido">
            <!-- todo: terminar seleccion de universidades, refactorizar, estruxturar paginas de universidades -->
        
            <section id = "primeros_pasos_section">
                <h2> Primeros pasos </h2>
            </section>
        
            <section id = "universidades_section">
                <h2> Universidades </h2>
                <div class = "category_container">
                    <div class="category_name">
                        Top
                    </div>
                    <div class="universities">
                        <a href = "html_universidades/harvard.html"> Universidad de Harvard                  (Cambridge, Massachusetts)</a>
                        <a href = "html_universidades/stanford.html"> Universidad de Stanford                 (Stanford, California)</a>
                        <a href = "html_universidades/mit.html"> Instituto Tecnológico de Massachusetts  (Cambridge, Massachusetts)</a>
                        <a href = "html_universidades/california.html"> Universidad de California               (Berkeley, California)</a>
                        <a href = "html_universidades/michigan.html"> Universidad de Michigan                 (Ann Arbor, Míchigan)</a>
                        <a href = "html_universidades/washington.html"> Universidad de Washington               (Seattle, Washington)</a>
                    </div>
                </div>
                <div class = "category_container">
                    <div class="category_name">
                        Target
                    </div>
                    <div class="universities">
                        <a href = "html_universidades/harvard.html"> Universidad de Harvard                  (Cambridge, Massachusetts)</a>
                        <a href = "html_universidades/stanford.html"> Universidad de Stanford                 (Stanford, California)</a>
                        <a href = "html_universidades/mit.html"> Instituto Tecnológico de Massachusetts  (Cambridge, Massachusetts)</a>
                        <a href = "html_universidades/california.html"> Universidad de California               (Berkeley, California)</a>
                        <a href = "html_universidades/michigan.html"> Universidad de Michigan                 (Ann Arbor, Míchigan)</a>
                        <a href = "html_universidades/washington.html"> Universidad de Washington               (Seattle, Washington)</a>
                    </div>
                </div>
                <div class = "category_container">
                    <div class="category_name">
                        Safety
                    </div>
                    <div class="universities">
                        <a href = "html_universidades/harvard.html"> Universidad de Harvard                  (Cambridge, Massachusetts)</a>
                        <a href = "html_universidades/stanford.html"> Universidad de Stanford                 (Stanford, California)</a>
                        <a href = "html_universidades/mit.html"> Instituto Tecnológico de Massachusetts  (Cambridge, Massachusetts)</a>
                        <a href = "html_universidades/california.html"> Universidad de California               (Berkeley, California)</a>
                        <a href = "html_universidades/michigan.html"> Universidad de Michigan                 (Ann Arbor, Míchigan)</a>
                        <a href = "html_universidades/washington.html"> Universidad de Washington               (Seattle, Washington)</a>
                    </div>
                </div>
            </section>
        
            <section id = "requisitos_generales_section">
                <h2> Requisitos generales </h2>
            </section>
            
        </div>
        
    </body>
    </html>

Pues bien, la duda viene en el position: relative de .universities.

Se supone que cuando position es relative el elemento forma parte del flujo, y cuando es absolute deja de hacerlo y, por lo tanto, deja de ocupar espacio.

Pues bien, aquí pasa exactamente lo contrario. Cuando es relative (es decir, como lo puse en el ejemplo) no forma parte del flujo, y cuando es absolute sí. De hecho, la pagina permite hacer desplazamiento cuando .universities está "oculto" y su position es absolute.

¿Por qué?

2
  • Creo que te estás confundiendo un poco. Redacto respuesta para aclarártelo. Commented el 10 ago. 2021 a las 12:39
  • Ya tienes la respuesta redactada. Espero que solucione la duda que tienes. Commented el 10 ago. 2021 a las 13:20

1 respuesta 1

2

Comportamiento habitual

Con la posición relative estás desplazando el contenido de donde debería colocarse, pero éste mantiene "ocupado" su sitio original aunque esté vacío.

i {
  position: relative;
  top: 25px;
  left: 25px;
  border: 1px solid red;
}
<p>Hola <i>a</i> todos</p>

Con la posición absolute colocas en una posición absoluta el contenido, sin ocupar espacio en su origen.

i {
  position: absolute;
  top: 25px;
  left: 25px;
  border: 1px solid red;
}
<p>Hola <i>a</i> todos</p>

Tu código

Tu efecto se basa en que el elemento universities aparentemente está oculto porque el desbordamiento del elemento padre oculta el hecho de que realmente está más allá del margen derecho.

Al usar una posición absoluta estás escapando del overflow: hidden; que tienes en el elemento superior category_container.

Por ese motivo, aunque tu elemento esté a la derecha del margen derecho, éste no provoca mostrar las barras de desplazamiento cuando está en una posición relativa, pero en el momento que escapa del ámbito de ocultar el desbordamiento del elemento padre, éste provoca las barras de desplazamiento si el tamaño desborda la ventana del navegador.

Ejemplo:

p {
  border: 1px solid red;
  overflow: hidden;
  max-height: 5em;
}

i {
  position: relative;
  top: 25px; left: 25px;
  width: 2000px; height: 2000px;
  border: 1px solid red;
  display: inline-flex;
}

input[type="checkbox"]:checked + label + p > i {
  position: absolute;
}
<input type="checkbox" id="prueba" />
<label for="prueba">Pulsa para cambiar</label>
<p>Hola <i>a</i> todos</p>

1
  • 1
    Graicas por la respuesta !
    – PySanti
    Commented el 10 ago. 2021 a las 13:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.