49 lines
929 B
HTML
49 lines
929 B
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
height: 1000px;
|
|
}
|
|
|
|
body > div {
|
|
outline: 1px solid black;
|
|
}
|
|
|
|
.box {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: 100px;
|
|
background-color: green;
|
|
}
|
|
|
|
.transformed {
|
|
-webkit-transform: translateZ(1px);
|
|
}
|
|
</style>
|
|
<script>
|
|
// Scroll on load to test fixed positioning.
|
|
window.addEventListener('load', function() {
|
|
window.scrollTo(0, 100);
|
|
}, false)
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="box" style="margin: 150px 50px;">
|
|
<div class="fixed box">
|
|
<div class="transformed box"></div> <!-- Necessary to activate preserve3d compositing -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed box" style="left: 250px;">
|
|
<div class="transformed box"></div> <!-- Necessary to activate preserve3d compositing -->
|
|
</div>
|
|
</body>
|
|
</html> |