Overriding overflow: hidden
Answer is: You can't. Either the parent has overflow:hidden
then all child-elements will be clipped, or you have overflow:(visible|auto|scroll|...)
then all children are treated according to that rule. There is no possibility you could mix states - all children are treated equally.
However, you could introduce additional container-elements inside the parent (which no longer has overflow:hidden) like in this pseudo-code:
<parent>
<container1 style="overflow:hidden">
<!-- these will be clipped -->
<element>
<element>
</container>
<container2 style="overflow:visible">
<!-- these will be shown -->
<element>
<element>
</container>
</parent>
edit: example
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/
Override ALL parent / grandparent / etc.... that have overflow:hidden and Witdh
If the page doesn't need to scroll this might work. It at least does what you have asked for, show the red box.
Adding position: fixed;
to the element that you want to see breaks overflow: hidden;
.
JSFiddle
This works because fixed elements are contained by the viewport.
W3 CSS Position Fixed
Hovered element to overflow out from an overflow:hidden element css
Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden
declaration on the parent div. See: Allow specific tag to override overflow:hidden
Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden
.
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
CSS Object-Fit: Contain; Is Keeping Original Image Width in Layout
Access Control Allow Origin Issue in Angular 2
All Widths Set to Width of Widest Element
Using Z-Index to Get Div Above Another Div
Can Microdata Be Applied on Any Type of HTML Element
How to Make the HTML5 Number Field Display Trailing Zeroes
I Can't Get My Font-Awesome Icons to Show Up. Tried Importing CSS with Multiple Methods
Flexbox: Wrong Width Calculation When Flex-Direction: Column, Flex-Wrap: Wrap
How to Notify the HTML Container That the Swf Has Finished, Using Swfobject
Using .Otf Fonts on Web Browsers
Why Are Dashes Preferred for CSS Selectors/HTML Attributes
Do HTML Websockets Maintain an Open Connection for Each Client? Does This Scale
Form Inline Inside a Form Horizontal in Twitter Bootstrap
How to Trigger a Phone Call When Clicking a Link in a Web Page on Mobile Phone