Position in CSS

 In order to create additional advanced layouts, we’d like to debate the position property. It Specify the kind of position method are used for a part.

 CSS Positions Values:-

•  Static
•  Relative
•  Absolute
• Fixed

Static

•  Static is that the default worth.
• The part with static position isn’t positioned in any special means.

 Relative

Relative is same as static unless we tend to add some additional properties.

 Absolute

• Absolute is that the trickiest position worth.
• Absolute behaves like mounted except relative to the closest positioned relative rather than relative to the viewport.
•  If associate absolutely-positioned part has no positioned ancestors, it uses the document body, and still moves in conjunction with page scrolling.

 Fixed

A fixed part is positioned relative to the viewport, which implies it continually stays within the same place albeit the page is scrolled. like relative, the top, right, bottom, and left properties ar used.

Necessary CSS Properties with Position

•  Left
• Right
• Top
• Bottom

CSS Selector

CSS selector is employed to outline the component within which we tend to apply the CSS info. Selector area unit the primary a part of the rule. they’re going outside the frizzly braces and tell US that parts the rule acts upon.

There are various kinds of CSS selectors:-

• Basic selectors
• Grouping selectors
• Pseudo selectors
• Combinators selectors

 Basic Selectors

• Universal Selector

 Universal selector selects all component of the document.

Syntax :- *

• Type/Element Selector

 Type selector selects all component of given node name.

Syntax :- elementname

• Class Selector

Class selector selects all component of “class” attribute.

Syntax :- .classname

•  ID Selector

 It selects part supported the “id” attribute. ID is exclusive to the given component within the document.

Syntax :- idname

• Attribute Selector

 Attribute selector selects all component of the document with given attribue and attribute-value.

Syntax :- [attr] [attr=value].

Grouping Selectors

Grouping selectors is employed to pick the matching parts. It uses ” , ” for grouping methodology. Syntax :- X,Y

Pseudo Selectors

•  Pseudo Elements

The ” :: ” pseudo parts is employed to represent entities that don’t seem to be enclosed in HTML documents.

•  Pseudo Classes

The ” : “ pseudo categories permit the choice of parts supported state info that’s not contained within the document.

Combinators Selectors

• General sibling Combinator

General sibling combinator means the second component follows the primary and each share identical parent. It uses ” ~ “ for sib combinators. Syntax:- X ~ Y

• Child Combinator

The child combinator selects nodes that area unit direct youngsters of the primary component. It uses ” > “ for kid combinator. Syntax:- X > Y

•  Adjacent sibling combinatory

 This means that the second component directly follows the primary, and each share identical parent. It uses ” + “ for kid combinator. Syntax:- X + Y

• Column combinator

The column combinator selects nodes that belong to a column. It uses ” || ” for column combinator. Syntax:- X || Y

• Descendant combinatory

 The Descendant combinator selects nodes that area unit descendants of the primary component. It uses ” “ for column combinator. Syntax:- X Y