OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 #absolute { | 3 #absolute { |
4 position: absolute; | 4 position: absolute; |
5 background-color: chartreuse; | 5 background-color: chartreuse; |
6 top: 100px; | 6 top: 100px; |
7 left: 100px; | 7 left: 100px; |
8 width: 200px; | 8 width: 200px; |
9 height: 200px; | 9 height: 200px; |
10 clip: rect(0, 200px, 20px, 0px); | 10 clip: rect(0, 200px, 20px, 0px); |
11 } | 11 } |
12 #fixed { | 12 #fixed { |
13 position: fixed; | 13 position: fixed; |
14 top: 50px; | 14 top: 50px; |
15 left: 50px; | 15 left: 50px; |
16 background-color: salmon; | 16 background-color: salmon; |
17 width: 100px; | 17 width: 100px; |
18 height: 100px; | 18 height: 100px; |
19 } | 19 } |
20 #overlap { | 20 #overlap { |
21 position:absolute; | 21 position:absolute; |
22 background-color: pink; | 22 background-color: pink; |
23 top: 0; | 23 top: 0; |
24 left: 0; | 24 left: 0; |
25 height: 75px; | 25 height: 75px; |
26 width: 75px; | 26 width: 75px; |
27 -webkit-transform: translateZ(0); | 27 transform: translateZ(0); |
28 } | 28 } |
29 </style> | 29 </style> |
30 <div id="overlap"></div> | 30 <div id="overlap"></div> |
31 <div id="absolute"> | 31 <div id="absolute"> |
32 <div id="fixed"></div> | 32 <div id="fixed"></div> |
33 </div> | 33 </div> |
OLD | NEW |