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 con

Answer 1

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.