Force Element to Display Outside of Overflow:Hidden

force element to display outside of overflow:hidden

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>

Displaying an element outside overflow hidden container

You can change positioning of the dropdown to fixed and handle the scroll using js, like the following.

var main = document.getElementsByClassName('main')[0];var dd = document.getElementsByClassName('pAbsolute')[0];var offset = dd.getBoundingClientRect().top;main.onscroll = function() {  var st = main.scrollTop;  ddt = (offset - st);  dd.style.top = ddt + 'px';}

.main {  height: 100px;  overflow-y: scroll;  overflow-x: hidden;}.pRelative {  position: relative;}.pAbsolute {  position: fixed;}.dropdown {  width: 100px;  background-color: cornflowerblue;  z-index: 1000;}.option {  border-top: 1px solid green;  border-bottom: 1px solid green;}table td {  border: 1px solid black;  padding: 10px;}

<div class="main">  <table>    <tr>      <td>row1 column1</td>      <td>        <div class="pRelative">          <div class="pAbsolute dropdown">            <div class="option">Zero</div>            <div class="option">One</div>            <div class="option">Two</div>            <div class="option">Three</div>            <div class="option">Four</div>            <div class="option">Five</div>            <div class="option">Six</div>          </div>        </div>      </td>      <td>row1 column3</td>    </tr>    <tr>      <td>row2 column1</td>      <td>row2 column2</td>      <td>row2 column3</td>    </tr>    <tr>      <td>row3 column1</td>      <td>row3 column2</td>      <td>row3 column3</td>    </tr>    <tr>      <td>row4 column1</td>      <td>row4 column2</td>      <td>row4 column3</td>    </tr>    <tr>      <td>row5 column1</td>      <td>row5 column2</td>      <td>row5 column3</td>    </tr>    <tr>      <td>row6 column1</td>      <td>row6 column2</td>      <td>row6 column3</td>    </tr>    <tr>      <td>row7 column1</td>      <td>row7 column2</td>      <td>row7 column3</td>    </tr>    <tr>      <td>row8 column1</td>      <td>row8 column2</td>      <td>row8 column3</td>    </tr>  </table></div>

Force child element visible outside an overflow:hidden parent

Unfortunately, you can't. The child element is only capable of changing within the parents region when the position is not set to fixed or absolute.

If you don't want to make the child fixed, you could try position:absolute; and set the parent to position: relative;

Like this...

.slide img {
  position: absolute;
  z-index: 2;
}
.slide {
  position: relative;
}

Or you could try to only hide the overflow on 1 direction. Like overflow-y:hidden; Or overflow-x: hidden;

Need to make an element outside the parent which have overflow-y auto

The overflow-y: auto; on dialog element is the issue. It will behave the same as overflow-hidden in this case, making the child element close icon invisible if it's placed outside.

If you can't remove the overflow-y: auto; then you should wrap the dialog in another div (that has no overflow value set but has position: relative set) and then also make the close icon a direct child of that element.

Like this:

<div style="position: relative">
  <div class="dialog dialog--active" style="width: 1000px;">
    <div class="card" />
  </div>
  <div class="close">
    <img src="http://cdn.onlinewebfonts.com/svg/img_211963.png" alt="Close" />
  </div>
</div>

Absolute positioned element outside of overflow hidden div

Change position absolute to position fixed.

HTML

<div style="display: flex; overflow: hidden;">
  <div class="swiper-container" style="flex: 1; overflow: hidden;">
    <div class="wrapper" style="position: relative;">

      <div class="swiper-slide">
        <div style="position: fixed; margin-top: -10px;">text</div>
      </div>

    </div>
  </div>
</div>

CSS

.swiper-slide {
  background: #999;
  width: 50px;
  height: 50px;
  display: block;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
}

Codepen

Make child visible outside an overflow:hidden parent

You can use the clearfix to do "layout preserving" the same way overflow: hidden does.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

add class="clearfix" class to the parent, and remove overflow: hidden;

Force Element to Display Outside of Overflow:Hidden