Blog

  • I believe, each front-end developer encountered this case, a minimum of once. as an instance, you would like to absolute position something… and so you are trying to move it in some direction, and boom it disappears… You forgot the parent was set to overflow: hidden and currently, your element is lost within the hidden infinite vacuum.

    However, sometimes, it ends by putting absolutely the element outside of the ridiculous overflow: hidden parent, and you cursing CSS that how it sucks. Yes, there are too many flaws with CSS, it truly sucks a lot.

     

    Let me show you a neat trick.

     

    But first, if you are making an attempt to mess with these absolute/relative properties you actually ought to bear in mind of those few important rules:

    • An absolutely positioned element is actually positioned relating to a relative parent, or the closest found relative parent, which suggests it bubbles up the DOM till it finds a relative context to use the positioning.
    • If no relative parent is found it'll then reach the very best attainable « instrumentality », that is that the browser window, aka the viewport (or the document perhaps, or the window…?
    • It works identically if the parent is about to absolute rather than relative (an absolute within another absolute) the primary absolute acts because of the positioning context for the second absolute.

     

    Anyway, here our main problem is that the relative parent is additionally the overflow: hidden one. Well, if we tend to merely move the position rule to place it only 1 level on top of, then the problem is resolved. 

     

    And let me prove what I'm saying.

     

    HTML

    <div class="parent">
        <div class="child"> </div>
    </div>
    

     

    CSS

    .parent {
      position:relative;
      overflow:hidden;
    }
    .child {
      position:absolute; 
      top:-10px; 
      left:-5px;
    }
    

     

    Result

     

    Indeed, we will actually see that the insufficient blue sq. is partly hidden by its overflow hidden parent.

    Now the solution

    Now let's add another parent and move the position:relative one level up (or, in your context, you'll maybe simply use AN existing upper parent).

     

    HTML

    <div class="grand-parent">
        <div class="parent">
            <div class="child"> </div>
        </div>
    </div>
    

     

    CSS

    .grand-parent {
      position:relative;
    }
    .parent {
      overflow:hidden;
    }
    .child {
      position:absolute; 
      top:-10px; 
      left:-5px;
    }
    

     

    Result

Tags: html