<!DOCTYPE html> <html> <style type="text/css"> #outer { width: 100px; height: 100px; overflow: hidden; } #clipped { mask: url(#myMask); clip-path: url(#myClip); } #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 mask, not by the 100x100 overflow:hidden clip. --> </div> </div> </div> <svg height="0"> <defs> <mask id="myMask" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse"> <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/> <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/> </mask> <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"/> <!-- The forth rect should be clipped out --> <rect x="300" y="300" width="100" height="100"/> </clipPath> </defs> </svg> </body> </html>