W3cubDocs

/Support Tables

CSS position:sticky

Keeps elements positioned as "fixed" or "relative" depending on how it appears in the viewport. As a result the element is "stuck" when necessary while scrolling.

Spec https://drafts.csswg.org/css-position/#sticky-pos
Status W3C Working Draft
IE Edge Firefox Chrome Safari Opera
      73 (4)    
    65 72 (4)    
    64 71 (4) TP (*)  
11 18 (6) 63 70 (4) 12 (*) 56 (4)
10 17 (6) 62 69 (4) 11.1 (*) 55 (4)
9 16 (6) 61 68 (4) 11 (*) 54 (4)
8 15 60 67 (4) 10.1 (*) 53 (4)
Show all
7 14 59 66 (4) 10 (*) 52 (4)
6 13 58 (3) 65 (4) 9.1 (*) 51 (4)
5.5 12 57 (3) 64 (4) 9 (*) 50 (4)
    56 (3) 63 (4) 8 (*) 49 (4)
    55 (3) 62 (4) 7.1 (*) 48 (4)
    54 (3) 61 (4) 7 (5,*) 47 (4)
    53 (3) 60 (4) 6.1 (5,*) 46 (4)
    52 (3) 59 (4) 6 45 (4)
    51 (3) 58 (4) 5.1 44 (4)
    50 (3) 57 (4) 5 43 (4)
    49 (3) 56 (4) 4 42 (4)
    48 (3) 55 (2) 3.2 41 (2)
    47 (3) 54 (2) 3.1 40 (2)
    46 (3) 53 (2)   39 (2)
    45 (3) 52 (2)   38
    44 (3) 51   37
    43 (3) 50   36
    42 (3) 49   35
    41 (3) 48   34
    40 (3) 47   33
    39 (3) 46   32
    38 (3) 45   31
    37 (3) 44   30
    36 (3) 43   29
    35 (3) 42   28
    34 (3) 41   27
    33 (3) 40   26
    32 (3) 39   25
    31 (1) 38   24
    30 (1) 37   23
    29 (1) 36 (2)   22
    28 (1) 35 (2)   21
    27 (1) 34 (2)   20
    26 (1) 33 (2)   19
    25 32 (2)   18
    24 31 (2)   17
    23 30 (2)   16
    22 29 (2)   15
    21 28 (2)   12.1
    20 27 (2)   12
    19 26 (2)   11.6
    18 25 (2)   11.5
    17 24 (2)   11.1
    16 23 (2)   11
    15 22   10.6
    14 21   10.5
    13 20   10.0-10.1
    12 19   9.5-9.6
    11 18   9
    10 17    
    9 16    
    8 15    
    7 14    
    6 13    
    5 12    
    4 11    
    3.6 10    
    3.5 9    
    3 8    
    2 7    
      6    
      5    
      4    
iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser
12 (*) all 67 (4) 10 46 (4) 70 (4) 63 11 11.8 (4) 7.2 1.2 (2) 7.12
11.3-11.4 (*)   4.4.3-4.4.4 7 12.1     10   6.2    
11.0-11.2 (*)   4.4   12         5    
10.3 (*)   4.2-4.3   11.5         4    
Show all
10.0-10.2 (*)   4.1   11.1              
9.3 (*)   4   11              
9.0-9.2 (*)   3   10              
8.1-8.4 (*)   2.3                  
8 (*)   2.2                  
7.0-7.1 (5,*)   2.1                  
6.0-6.1 (5,*)                      
5.0-5.1                      
4.2-4.3                      
4.0-4.1                      
3.2                      

Notes

  1. Can be enabled in Firefox by setting the about:config preference layout.css.sticky.enabled to true

  2. Enabled through the "experimental Web Platform features" flag

  3. Not supported on any table parts - See Firefox bug

  4. Supported on th elements, but not thead or tr - See Chrome bug

  5. Do not appear to support sticky table headers

  6. Supported on th elements, but not thead or tr - See Edge bug

* Partial support with prefix.

Bugs

  • Firefox 58 & below, Chrome 63 & below and Safari 7 & below do not appear to support sticky table headers.

  • A parent with overflow set to auto will prevent position: sticky from working in Safari

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-sticky