CSS Position

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Position

CSS Position property is a powerful tool for web developers and designers to create complex layouts and page designs. It allows developers to precisely place elements on a page and control how they interact with other elements. CSS positioning can be used to create complex layouts, fix elements to certain parts of the page, and even create animations.

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

Static is the default value for the position property and it is the most basic positioning option. When an element is set to static, it is rendered in the normal flow of the page, as if no positioning was applied.

Relative positioning allows for elements to be positioned relative to other elements. It is useful for creating complex layouts or for positioning an element relative to its parent. For example, if an element is set to position: relative; and then given a top and left value, it will be positioned relative to its parent.

Absolute positioning is the most powerful of the four position values. When an element is set to absolute, it is removed from the normal flow of the page and positioned relative to its closest-positioned ancestor. This allows for elements to be positioned anywhere on the page, even overlapping other elements.

Fixed positioning is similar to absolute positioning in that it removes the element from the normal flow of the page. However, a fixed element is always positioned relative to the viewport, meaning it remains in the same position even when the page is scrolled.

position property can take the following values:

Position: static | absolute | fixed | relative | sticky | initial | inherit;

div {
    position:absolute;
}