Useful Features of CSS
- static (default)
- sticky (CSS3)
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of
left. The offset does not affect the position of any other elements. This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when
overlay), even if that ancestor isn’t the nearest actually scrolling ancestor. This effectively inhibits any “sticky” behavior (see the GitHub issue on W3C CSSWG).
Some attribute related to position
- top, right, bottom, left Only working when position set relative, absolute, sticky or fixed
- Match Parent(Spinner、Model’s background)
position: fixedisn’t working in sometimes?
z-indexisn’t working in sometimes?
- visible (default)
- What if it set
- Can we use it to highlight columns when hover cells in a table?
- Can we use it to scroll in the table except the header?
transition: property duration timing-function delay;
||Specifies the name of the CSS property that sets the transition effect.|
||Specifies how many seconds or milliseconds it takes to complete the transition effect.|
||Specifies the speed curve of the speed effect.|
||Define when the transition effect starts.|
- Expand / collapse elements with transition.
- Transition when elements enter / leave.
var( <custom-property-name> , <declaration-value>? )
calc( <calc-sum> | <calc-product> | <calc-value> )
Some Other New Features
Color Value Support
rgb(0 0 0) (CSS4)
rgba(0 0 0 / 50%) (CSS4)
hsl(0deg 0% 0%) (CSS4)
hsla(0deg 0% 0% / 50%) (CSS4)