Home / Questions / 476050
Accepted
PySanti
Asked: 2022-08-11 04:23:13 +0800 CST 2022-08-11 04:23:13 +0800 CST

CSS position: absolute does not work as I expect

  • 772

I just finished rendering an effect with HTML and CSS .

It is the following:

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

Well, the doubt comes in position: relativethe .universities.

It is assumed that when it positionis relativethe element is part of the flow, and when it is absoluteit stops doing so and, therefore, stops taking up space.

Well, the exact opposite happens here. When it is relative(that is, as I put it in the example) it is not part of the flow, and when it is absoluteit is. In fact, the page is scrollable when it .universitiesis "hidden" and its positionis absolute.

Why?

html

1 Answers

  1. Best Answer

    usual behavior

    With the position relativeyou are moving the content from where it should be, but it keeps its original place "occupied" even if it is empty.

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

    With the position absoluteyou place the content in an absolute position, without occupying space in its origin.

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

    Your code

    Your effect is based on the fact that the element universitiesis apparently hidden because the parent element's overflow hides the fact that it is actually beyond the right margin.

    By using an absolute position you are escaping the overflow: hidden;one you have on the top element category_container.

    For that reason, even though your element is to the right of the right margin, it doesn't cause the scrollbars to show when it's in a relative position, but the moment it escapes the parent element's overflow hide scope, it causes the scrollbars. scroll if the size overflows the browser window.

    Example:

    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>

    • 2