CSS How to have position absolute div inside a position relative div not be cropped by an overflow hidden on a container

Question

I have 3 levels of div     In green below  A top level div with overflow  hidden  This is because I want some content  not shown here  inside that box to cropped if it exceeds the size of the box   In red below  Inside this  I have div with position  relative  The only use for this is for the next level   In blue below  Finally a div I take out of the flow with position  absolute but that I want positioned relative to the red div  not to the page     I d like to have the blue box be taken out of the flow and expand beyond the green box  but be positioned relative to the red box as in     However  with the code below  I get     And removing the position  relative on the red box  now the blue box is allowed to get out of the green box  but is not positioned anymore relative to the red box     Is there a way to    Keep the overflow  hidden on the green box  Have the blue box expand beyond the green box and be positioned relative to red box    The full source    x000D   x000D   d1   x000D    overflow  hidden  x000D    background   efe  x000D    padding  5px  x000D    width  125px  x000D    x000D   x000D   d2   x000D    position  relative  x000D    background   fee  x000D    padding  2px  x000D    width  100px  x000D    height  100px  x000D    x000D   x000D   d3   x000D    position  absolute  x000D    top  10px  x000D    background   eef  x000D    padding  2px  x000D    width  75px  x000D    height  150px  x000D    x000D   lt br  gt  lt br  gt  lt br  gt  x000D   lt div id  d1   gt  x000D     lt div id  d2   gt  x000D       lt div id  d3  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

A trick that works is to position box  2 with position  absolute instead of position  relative  We usually put a position  relative on an outer box  here box  2  when we want an inner box  here box  3  with position  absolute to be positioned relative to the outer box  But remember  for box  3 to be positioned relative to box  2  box  2 just need to be positioned  With this change  we get     And here is the full code with this change    lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt       lt head gt           lt style type  text css  gt                  Positioning                 box1   overflow  hidden                box2   position  absolute                box3   position  absolute  top  10px                   Styling                 box1   background   efe  padding  5px  width  125px                box2   background   fee  padding  2px  width  100px  height  100px                box3   background   eef  padding  2px  width  75px  height  150px             lt  style gt       lt  head gt       lt body gt           lt br  gt  lt br  gt  lt br  gt           lt div id  box1  gt               lt div id  box2  gt                   lt div id  box3   gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

I don t really see a way to do this as-is   I think you might need to remove the overflow hidden from div 1 and add another div within div 1  ie as a sibling to div 2  to hold your unspecified  content  and add the overflow hidden to that instead  I don t think that overflow can be  or should be able to be  over-ridden

User · Answer

If there is other content not being shown inside the outer-div  the green box   why not have that content wrapped inside another div  let s call it  content   Have overflow hidden on this new inner-div  but keep overflow visible on the green box   The only catch is that you will then have to mess around to make sure that the content div doesn t interfere with the positioning of the red box  but it sounds like you should be able to fix that with little headache    lt div id  1  background   efe  padding  5px  width  125px  gt       lt div id  content  style  overflow  hidden   gt       lt  div gt       lt div id  2  style  position  relative  background   fee  padding  2px  width  100px  height  100px  gt           lt div id  3  style  position  absolute  top  10px  background   eef  padding  2px  width  75px  height  150px   gt       lt  div gt   lt  div gt

User · Answer

There s no magical solution of displaying something outside an overflow hidden container    A similar effect can be achieved by having an absolute positioned div that matches the size of its parent by positioning it inside your current relative container  the div you don t wish to clip should be outside this div     1  mask     width  100     height  100     position  absolute    z-index  1    overflow  hidden      Take in mind that if you only have to clip content on the x axis  which appears to be your case  as you only have set the div s width   you can use overflow-x  hidden

[css] CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

Examples related to css

Examples related to overflow

Examples related to css-position