blob: 47cea9d192b7894dc1605757ee8239b758627968 [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
<style>
.box {
position: absolute;
height: 200px;
width: 200px;
background-color: blue;
}
.scroller {
margin: 60px;
overflow: scroll;
border: 1px solid black;
width: 220px;
height: 220px;
-webkit-overflow-scrolling: touch;
will-change: z-index;
}
.scrolled-contents {
height: 1000px;
}
.outside {
z-index: 1;
top: 20px;
left: 20px;
background-color: green;
}
.back {
z-index: 0;
}
.front {
z-index: 2;
top: 120px;
left: 120px;
background-color: orange;
}
</style>
</head>
<body>
<div class="outside box"></div>
<div class="scroller">
<div class="scrolled-contents">
<div class="back box"></div>
<div class="front box"></div>
</div>
</div>
</body>
</html>