<!DOCTYPE html> <html> <style type="text/css"> #outer { width: 100px; height: 100px; overflow: hidden; } #clipped { clip-path: inset(10px 10px 10px 10px); opacity: 0.5; width: 200px; height: 200px; } #absolutePosition { position: absolute; top: 0; left: 0; width: 400px; height: 400px; background-color: blue; } </style> <body style="margin: 0px;"> <div id="outer"> <div id="clipped"> <div id="absolutePosition"> <!-- This should only be clipped by the clip-path, not by the 100x100 overflow:hidden clip. --> </div> </div> </div> <svg height="0"> <defs> <clipPath id="myClip"> <rect x="0" y="0" width="100" height="100"/> <rect x="100" y="100" width="100" height="100"/> <rect x="200" y="200" width="100" height="100"/> </clipPath> </defs> </svg> </body> </html>