Fixed and sticky

fixed positioning is similar to absolute positioning, and the difference is that the element's include block is through the built-in block containing the initial viewports , unless any ancestor has transform , perspective or filter property set to something none more than the other (see CSS Conversion Specifications ) and then replace the ancestor with the include block the element . This can be used to create a "floating" element that remains in the same position regardless of scrolling. In the following example, the box "one" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same position relative to the viewport.

#one  {   :;   top :   left :   background : blue  } fixed block does not slide with mouse

viscous positioning can be considered as a mixture of relative positioning and fixed positioning. a sticky positioned element is treated as relative positioning until it exceeds the specified threshold, at which point it is considered fixed until it reaches its parent's boundary. for example ...

#one  {  :;  on :}   

... The element that is positioned with the ID is a relative until the viewport is scrolled so that the component will be less than 10 pixels from the top. when the threshold is exceeded, the element is fixed to 10 pixels from the top.

A common use for sticky positioning is to use headings in alphabetical lists. the "B" heading will appear under items that begin with "A" until they scroll outside the screen. the "B" title will then remain fixed at the top of the viewport until all "B" items are scrolled out of the screen, and it will be overwritten by "C" instead of using the rest of the content to slide the screen. Title, and so on.

you must have at least one specified threshold value top , right , bottom , or left for viscous positioning as expected. Otherwise, it will not be distinguishable from relative positioning.

Dt{Background：#b8c1c8;Border-bottom：1px solid#989ea4;Border-top：1px solid#717d85;Color：#FFF font :  Bold 18px/21px Helvetica,arial,sans-serif   margin :  0   fill :  2px 0 0 12px  ;  position : -webkit-sticky  ;  location :  sticky   ; :  -1px               /span>       

Fixed and sticky