force element to display outside of overflow:hidden
This is probably attempting the impossible, but I would like to display an element outside of an element that is overflow: hidden. I know that makes no sense and things are working as they should, but just wanted to double check to see if there is a way.
Best described with this code:
.outer {
position: fixed;
top: 30px;
left: 50px;
overflow: hidden;
height: 30px;
width: 300px;
background: red;
}
.inner {
position: relative;
}
.show-up {
width: 100px;
height: 300px;
background: green;
position: absolute;
left: 20px;
overflow: visible;
}<div class="outer">
<div class="inner">
<div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>
</div>View on JSFiddle
The overflow:hidden definition will hide anything inside that element that extends beyond its bounds.
Depending on your specific application, you may be able to use a structure like this:
.container {
position: fixed;
top: 30px;
left: 50px;
height: 30px;
width: 300px;
background: red;
}
.outer {
overflow: hidden;
}
.inner {
position: absolute;
}
.show-up {
width: 100px;
height: 300px;
background: green;
position: relative;
margin-left: 20px;
}<div class="container">
<div class="outer">
<div class="inner"></div>
</div>
<div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>View on JSFiddle
Make an additional outer div with position relative and set the absolute position of the div you want to move outside of the overflow hidden div.
.container{
position:relative;
}
.overflow-hid-div{
overflow:hidden;
margin-left:50px;
width:200px;
height: 200px;
background-color:red;
}
.inner{
width:50px;
height: 50px;
background-color:green;
position: absolute;
left:25px;
top:25px;
}<div class='container'>
<div class='overflow-hid-div'>
<div class='inner'>
sup!
</div>
</div>
</div>https://jsfiddle.net/JerryGoyal/ysgrevoh/1/