Making Child Element Visible When Outside Parent Element Is Overflow
Posted By : Prince Kumar | 31-May-2018
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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Prince Kumar
Prince is a sharp and intellectual UI Developer, he has a good knowledge of HTML. CSS, Jquery. His hobbies are reading books, listening music and net surfing,