| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style type="text/css"> | 2 |
| 3 div { | 3 <html> |
| 4 height: 100px; | 4 <head> |
| 5 width: 100px; | 5 <style> |
| 6 } | 6 body { |
| 7 .spacer { | 7 margin: 0; |
| 8 background-color: red; | 8 } |
| 9 } | 9 |
| 10 .sticky { | 10 .group { |
| 11 background-color: green; | 11 display: inline-block; |
| 12 position: relative; | 12 position: relative; |
| 13 } | 13 width: 250px; |
| 14 .absoffset { | 14 height: 500px; |
| 15 background-color: green; | 15 } |
| 16 position: absolute; | 16 |
| 17 top: -100px; | 17 .container { |
| 18 } | 18 width: 200px; |
| 19 height: 400px; |
| 20 outline: 2px solid black; |
| 21 } |
| 22 |
| 23 .box { |
| 24 width: 200px; |
| 25 height: 200px; |
| 26 } |
| 27 |
| 28 .sticky { |
| 29 position: relative; |
| 30 top: 200px; |
| 31 background-color: silver; |
| 32 } |
| 33 |
| 34 .child { |
| 35 position: absolute; |
| 36 background-color: green; |
| 37 top: 50px; |
| 38 left: 50px; |
| 39 } |
| 40 |
| 41 .indicator { |
| 42 position: absolute; |
| 43 top: 250px; |
| 44 left: 50px; |
| 45 background-color: red; |
| 46 } |
| 19 </style> | 47 </style> |
| 20 <div class="spacer"></div> | 48 </head> |
| 21 <div class="sticky"> | 49 <body> |
| 22 <!-- | 50 <div class="group" style="top: -100px;"> |
| 23 Tests that the absolute positioned child is positioned relative to the stick
y container. You should see only a | 51 <div class="indicator box"></div> |
| 24 green box as this will cover up the red box above the sticky div. | 52 <div class="container"> |
| 25 --> | 53 <div class="sticky box"> |
| 26 <div class="absoffset"></div> | 54 <div class="child box"></div> |
| 27 </div> | 55 </div> |
| 56 </div> |
| 57 </div> |
| 58 |
| 59 </body> |
| 60 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1870663002:
Reland main thread position sticky implementation. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master