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 is that the default worth.
- The part with static position isn’t positioned in any special means.
Relative is same as static unless we tend to add some additional properties.
- 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.
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
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
- 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 is employed to pick the matching parts. It uses ” , ” for grouping methodology. Syntax :- X,Y
- 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.
- 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