How to ignore parent element's overflow:hidden in css
Method 1
A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.
Method 2
Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:
http://jsfiddle.net/kv0bLpw8/
Ignore overflow of parent element
Use position:absolute and use margin or translate to adjust the position. Then don't add position:relative to the parent element so it get ignored by the overflow.
.overflow-container { display: block; height: 60px !important; overflow: auto; overflow-x: hidden; float: left; background-color: #eaeaea; padding: 20px;}
.dropdown-container:hover .dropdown1 { display: block;}
.dropdown1 { display: none; position:absolute; margin-left:100px; margin-top:-10px;}<div class="overflow-container"> <div class="dropdown-container"> Select an option <ul class="dropdown1"> <li class="dropdown-item">Option 1</li> <li class="dropdown-item">Option 2</li> <li class="dropdown-item">Option 3</li> </ul> </div>
<div class="dropdown-container"> Select an option <ul class="dropdown1"> <li class="dropdown-item">Option 1</li> <li class="dropdown-item">Option 2</li> <li class="dropdown-item">Option 3</li> </ul> </div>
<div class="dropdown-container"> Select an option <ul class="dropdown1"> <li class="dropdown-item">Option 1</li> <li class="dropdown-item">Option 2</li> <li class="dropdown-item">Option 3</li> </ul> </div>
</div>CSS ignore overflow: hidden
overflow: hidden can't be overridden by descendent elements - they will always be clipped by the element with overflow: hidden.
Dropdown ignore parent overflow
You need to make the dropdown element position: fixed, the dropdown container positon: absolute and the parent position:relativefor this to work. You can adjust the positining of the container element using top, right, left, bottom but you'll need to use negative margins on the fixed element.
.w-100 { width: 100%; height: 100%;}
.h-100 { width: 100%; height: 100%:}
.modal-overlay { height: 100%; width: 100%; position: fixed; top: 0; left: 0; display: block; z-index: 65; padding-top: 100px; overflow: auto; background-color: rgba(0,0,0,.6);}
.modal-small { max-width: 600px; width: 40%; margin: 0 auto; float: none; display: block; position: relative; background-color: #fff; padding: 0;}
.container { min-height: 120px; max-height: 400px; overflow: auto; padding: 15px;}
.element-container { height: 100px; width: 100%; display: inline-block; padding: 10px; margin-bottom: 10px; position: relative;}
.element-flex-container { display: flex; align-items: center; height: 100%; padding: 5px 15px; border-radius: 2px; border-bottom: 3px solid rgba(0,0,0,.1); border-left: 1px solid rgba(0,0,0,.1); border-right: 1px solid rgba(0,0,0,.1); border-top: 1px solid rgba(0,0,0,.1);}
.avatar { height: 32px; width: 32px; border-radius: 100%; margin-right: 10px;}
.flex-1 { flex: 1;}
.dropdown-width { text-align: right; width: 100px;}
.dropdown-container { display: inline; position: absolute; top: 0; right:0;}
.toggle-dropdown { color: #4caf50}
.dropdown { position: fixed; border: 1px solid red; width: 120px; display: block; background-color: #fff; z-index: 10; margin-bottom: 20px; padding: 0; }<div class="modal-overlay"> <div class="modal-small"> <div class="w-100 h-100"> <!-- this is since I inject an ui-view --> <div class="w-100 h-100"> <!-- this is since I inject an ui-view --> <div class="container"> <!-- Repeat of elements --> <div class="element-container"> <div class="element-flex-container"> <img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" /> <div class="flex-1"> Something here </div> <div class="dropdown-width"> <div class="dropdown-container"> <div class="toggle-dropdown"> Toggle </div> <div class="dropdown"> Something here <br /> Something else <br /> Something else <br /> Something else <br /> Something else </div> </div> </div> </div> </div> </div> </div> </div> </div></div>Pseudo element ignore/override overflow hidden property
Unfortunately pseudo elements can't ignore the overflow property of their parents.
A good way to go around it is by creating a Parent for the property that should be outside of the element (in your case the Border) and give the child the overflow:hidden
CSS
.social-icons li a {
overflow: hidden;
position: relative;
width: 70px;
height: 70px;
border-radius: 50%;
background: #fa0546;
box-shadow: 0 2px 16px rgba(250, 5, 70, 0.5);
font-size: 33px;
line-height: 70px;
color: #eaeaea;
transition: all 0.3s ease;
text-shadow:0px 0px 0px rgb(213, 0, 33) ,
1px 1px 0px rgb(215, 0, 35) ,
2px 2px 0px rgb(216, 0, 36) ,
3px 3px 0px rgb(218, 0, 38) ,
4px 4px 0px rgb(219, 0, 39) ,
5px 5px 0px rgb(221, 0, 41) ,
6px 6px 0px rgb(222, 0, 42) ,
7px 7px 0px rgb(224, 0, 44) ,
8px 8px 0px rgb(225, 0, 45) ,
9px 9px 0px rgb(227, 0, 47) ,
10px 10px 0px rgb(228, 0, 48) ,
11px 11px 0px rgb(230, 0, 50) ,
12px 12px 0px rgb(232, 0, 52) ,
13px 13px 0px rgb(233, 0, 53) ,
14px 14px 0px rgb(235, 0, 55) ,
15px 15px 0px rgb(236, 0, 56) ,
16px 16px 0px rgb(238, 0, 58) ,
17px 17px 0px rgb(239, 0, 59) ,
18px 18px 0px rgb(241, 0, 61) ,
19px 19px 0px rgb(242, 0, 62) ,
20px 20px 0px rgb(244, 0, 64) ,
21px 21px 0px rgb(245, 0, 65) ,
22px 22px 0px rgb(247, 2, 67) ,
23px 23px 0px rgb(248, 3, 68) ,
24px 24px 0px rgb(250, 5, 70);
}
.border {
width: 70px;
height: 70px;
border-radius: 50%;
border: 5px solid rgb(227, 0, 47);
transition: all 0.3s ease;
overflow: hidden;
}
.border:hover a {
transform: scale(0.8);
}
.border:hover {
transform: scale(1.1);
}
HTML
<ul class="social-icons">
<li>
<div class="border">
<a href="#" target="_blank" class="fab fa-facebook-f"></a>
</div>
</li>
Break out of overflow:hidden
A possible workaround is to replace overflow:hidden with the following:
.navbar .headerItem.headerSearch {
display: table; /* like overflow, creates new block formatting context */
margin-left: 180px;
padding-right: 15px;
margin-top: 11px;
}
.navbar .headerItem.headerSearch:after {
/* hack to make the table use all available width */
content: '. .';
/* with such big spacing, the 2nd dot will always wrap to the new line,
making the table-like block use the width of the container
instead of shrinking to content */
word-spacing: 99in;
/* make this helper invisible */
display: block;
height: 0;
overflow: hidden;
}
Related Topics
How to Use Vh Minus Pixels in a CSS Calc()
How Do the SASS Variables Get Assigned to CSS Selectors with Foundation 4
Does a Background-Attachment of Fixed Work in iOS5
Failed to Decode Downloaded Font, Ots Parsing Error: Invalid Version Tag + Rails 4
Using :Focus to Style Outer Div
Does :Not() Negation Accept Descendant Selectors
Less Loops Used to Generate Column Classes in Twitter - How Do They Work
Fit Div Size to Background Image
How Should You Prefix Transform Properties in CSS3 Animations
How to Implement Max-Font-Size
CSS Variables Defaults: Set If Not Already Set
:Last-Child Pseudo-Class Mixed with Attribute Selector Not Working
How Does Hexadecimal Color Work