Area Of Exploration CSS
Published: 2021-12-20 06:38:39


1.	CSS Position: Position property specifies the positioning method used in CSS. There are four methods of positioning. Static, Relative, Fixed, Absolute, Sticky. Elements are positioned using the top, bottom, left, and right properties after the position property are set.

Static: By default, HTML elements are positioned static.

Relative: Position relative indicates the relative position to its normal position, according to the top, right, bottom, left properties.

Absolute: The element is removed from its original position and that position is filled up by its relative positioning element. It is positioned relative to its closest positioned ancestor. Its final position is determined by the top, right, bottom, left properties.

Fixed: The element is removed from its normal flow document and positioned according to the top, left, bottom, right, properties.

2.	Z-Index: Z-index sets the stack order of the element. This means which elements are being shown in front or behind the others, when two positioned overlapped each other without z-index specified the last HTML code shown top always. The value of z-index placed positive or negative value. Z-index only works in the positioned elements. 

3.	CSS Overflow:  The overflow property indicates the clip or content add or remove the scroll bars according to the body content. The overflow property has four values. This is visible, hidden, scroll, auto.

visible: The default behavior of the element in HTML.
hidden: the overflow is clipped and the rest of the content is invisible.
scroll: The overflow is clipped and a scrollbar is added to see the rest of the content.
auto: Similar to scroll but it only adds a scrollbar when necessary.
4.	CSS combinators: A combinator is a special thing that made the relationship among the selectors. 
The combinators are descendent selector (space), child selector (>), adjacent sibling selector (+), general sibling selector (~)

 descendent selector (space): The descendent selector matches all the elements to the descendant’s element,
child selector (>):  The child selector selects all the child elements of the specified element. 
adjacent sibling selector (+): It indicates directly after to another specific element. 
general sibling selector (~): The general sibling selector selects all the elements that are the next sibling of the specified element.

5.	CSS Transform: Transform property allows move, rotate, scale and skew to the CSS elements. The transform properties of CSS are translate (), rotate (), scaleX (), scaleY (), scale (), skewX (), skewY (), skew (), matrix ()
  
6.	CSS Transition: Transition allows to change the property value smoothly in a given direction. The transition has some properties like transition, transition-delay, transition-duration, transition-timing-function. The transition effect will start when the specified CSS property changes the value.
transition-timing-function: there are some values for the transition-timing function. These are ease (start slowly, then fast, end), 
linear (same speed from start to end), ease-in (slow-start), ease-out(slow-end), ease-in-out (slow start and end)

7.	CSS Animations: An animation lets an element gradually change from one style to another. To use CSS animation, keyframes are specified for the animation. Keyframes hold the style to be indicated at certain times. Use @keyframe animation_name property to use the animation.