Mike Mike - 11 months ago 54
CSS Question

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 JSFiddle http://jsfiddle.net/NUNNf/4/

Answer Source

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 class="show-up">this needs to show up ALL 300 pixels high of it</div>

View on JSFiddle