<style>
.container-isolated {
width: 300px;
height: 150px;
margin-bottom: 20px;
background-color: #ddd;
position: relative;
isolation: isolate; /* Creiamo un nuovo contesto di isolamento */
}
.overlay {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 100px;
background-color: rgba(255,0,0,0.5);
}
.blended {
width: 100%;
height: 100%;
background-color: #00f;
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<a href="#" onClick="window.history.go(-1);">Home</a>
<h2>Esempio con isolation: isolate</h2>
<div class="container-isolated">
<div class="blended"></div>
<div class="overlay"></div>
</div>