blob: 8675e180e858a6b0a62a3a66dc2952c2d9d6b41b [file] [log] [blame]
simon.fraser@apple.com475e7bd2019-05-18 01:32:03 +00001<!DOCTYPE html>
2<html>
3<head>
4 <style>
5 body {
6 margin: 0;
7 }
8 .backdrop {
9 position: fixed;
10 top: 10px;
11 left: 10px;
12 width: 500px;
13 height: 300px;
14 background-color: silver;
15 }
16
17 .container {
18 position: relative;
19 top: 20px;
20 left: 20px;
21 width: 480px;
22 height: 280px;
23 border: 1px solid black;
24 padding: 10px;
25 box-sizing: border-box;
26 }
27
28 .header {
29 position: relative;
30 z-index: 1;
31 overflow: hidden;
32 width: 460px;
33 height: 260px;
34 background-color: lightblue;
35 }
36
37 .target {
38 position: relative;
39 top: 10px;
40 left: 10px;
41 width: 200px;
42 height: 100px;
43 background-color: green;
44 }
45
46 .animating {
47 position: relative;
48 background-color: orange;
49 opacity: 0.6;
50 top: 20px;
51 left: 250px;
52 width: 180px;
53 height: 100px;
54 padding: 10px;
55 }
56 </style>
57</head>
58<body>
59 <div class="backdrop"></div>
60 <div class="container">
61 <div class="header">
62 <div class="target"></div>
63 <div class="animating"></div>
64 </div>
65 </div>
66</body>
67</html>