force element to display outside of overflow:hidden

Question

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 an

Answer 1

Make an additional outer div with position relative and set the absolute position of the div you want to move outside of the overflow hidden div.

.container{
  position:relative;
}
.overflow-hid-div{
  overflow:hidden;
  margin-left:50px;
  width:200px;
  height: 200px;
  background-color:red;
}
.inner{
  width:50px;
  height: 50px;
  background-color:green;
  position: absolute;
  left:25px;
  top:25px;

}

    

        

            sup!
        
    

https://jsfiddle.net/JerryGoyal/ysgrevoh/1/