CODEWITHSUNDEEP
htmlcssoverflow
learningtech
learningtech

Reputation: 33683

How to ignore parent element's overflow:hidden in css

I have a div element wrapping other div elements like so:

<div style="overflow:hidden">
    <div id="a"></div>
    <div id="b"></div>
</div>

I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.

What is the best way to achieve this?

Upvotes: 82

Views: 132542

Answers (4)

Mayank Kumar Chaudhari
Mayank Kumar Chaudhari

Reputation: 18538

The easiest and most convenient way is to wrap your container div inside another div and set position: relative on the external div.

.outer-container {
  position: relative;
  height: 50px;
}

.container {
  background: gray;
  overflow: hidden;
  height: 50px;
}

#a,
#b {
  height: 100px;
  width: 100%;
}

#a {
  background: green;
  position: absolute;
  top: 60px;
}

#b {
  background: red;
  font-size: 60px;
}
<div class="outer-container">
  <div class="container">
    <div id="a"></div>
    <div id="b">Cut off</div>
  </div>
</div>

Upvotes: 3

Ghassan Elias
Ghassan Elias

Reputation: 2233

#wrapper {
  width: 400px;
  height: 50px;
  position: relative;
  z-index: 1000;
  left: 0px;
  top: 0px;
}

#wrapper #insideDiv {
  width: 400px;
  height: 50px;
  overflow: hidden;
  position: absolute;
  z-index: 2000;
  left: 0px;
  top: 0px;
}

#wrapper #a {
  position: absolute;
  height: 30px;
  width: 100px;
  bottom: -40px;
  z-index: 1000;
  left: 0px;
}
<div id="wrapper">
  <div id="a">AAA</div>
  <div id="insideDiv">
    <div id="b">BBB</div>
  </div>
</div>

Upvotes: 3

parliament
parliament

Reputation: 22904

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/

Upvotes: 156

Heidar
Heidar

Reputation: 689

as people said, the element must be presented outside the parent in order to be not cropped. But you can do this with JavaScript to achieve the similar concept without having to change your actual markup:

function breakOverflow(elm) {
   var top = elm.offset().top;
   var left = elm.offset().left;
   elm.appendTo($('body'));
   elm.css({
      position: 'absolute',
      left: left+'px',
      top: top+'px',
      bottom: 'auto',
      right: 'auto',
      'z-index': 10000
   });
}

then pass the element you want to exclude from the cropping of its parent:

breakOverflow($('#exlude-me'));

Upvotes: 0

Related Questions