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

Question

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?

You can't do it like that, you need to take div#a out of the div with overflow:hidden. — darma
– darma, Commented Aug 17, 2012 at 20:58
#a { position: relative; top: 10px; }? or do you meant you want #a to be BELOW the bottom border of the outer div? — Marc B
– Marc B, Commented Aug 17, 2012 at 20:59
@MarcB - yes to I want to position #a below the bottom border of the outer div — learningtech
– learningtech, Commented Aug 17, 2012 at 21:00

parliament · Accepted Answer · 2016-04-04 16:13:11Z

159

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/

edited Apr 4, 2016 at 16:13

answered Apr 8, 2014 at 4:15

parliament

23.2k39 gold badges155 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

SMX Over a year ago

Method 1 works but may give weird results if the user scrolls the page. People landing on this answer: be sure to check out the JSFiddle under Method 2--it's very simple and works great!

Eduard Kolosovskyi Over a year ago

Method 1 has one more caveat: you cannot have any transform set on the element which has overflow

user2846569 Over a year ago

Does not play nicely if container has scrollbar

Beefster Over a year ago

Method 2 only works if you have no relatively positioned elements in between the leaf and the parent container... Doesn't work in my case where I can't actually override a style.

Slaven Semper Over a year ago

Interesting choice of 'ignore overflow' class name in fiddle.

|

Mario Petrovic · Accepted Answer · 2021-09-14 07:57:35Z

4

#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>

edited Sep 14, 2021 at 7:57

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

answered Aug 17, 2012 at 21:12

Ghassan Elias

2,2331 gold badge14 silver badges17 bronze badges

1 Comment

danielarend Over a year ago

this code solves the specific problem by changing html structure, but do not ignore parent's element overflow

Mayank Kumar Chaudhari · Accepted Answer · 2022-08-08 04:19:05Z

3

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>

answered Aug 8, 2022 at 4:19

Mayank Kumar Chaudhari

19.3k14 gold badges74 silver badges165 bronze badges

1 Comment

AnorZaken Over a year ago

I had a slightly more complicated structure with a overflow:clip container, with an inner container with overflow-x:scroll, with a wide table inside it, with a context-menu thing inside each <tr>, but your answer put me on the right path and I managed to find the solution thanks to that. (Make tr static, make menu container inside tr absolute, make menu inner-container relative, and then actual menu-content elements inside.) Was stumped on this initially so it was of great help! :)

Heidar · Accepted Answer · 2016-03-24 15:41:15Z

0

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'));

answered Mar 24, 2016 at 15:41

Heidar

6894 silver badges12 bronze badges

1 Comment

Eduard Kolosovskyi Over a year ago

This method has disadvantages: 1. the element lose some styles (e.g. .parent .element { ... }) 2. you can't rely on the ancestors in js code (e.g. $(element).closest('.js-parent'))

Collectives™ on Stack Overflow

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

4 Answers 4

7 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related