Position in CSS (cascading style sheet)

There are five position properties in CSS namely as static, relative, fixed, absolute and sticky. the top, right, bottom, and left properties determine the final location of positioned elements. these properties behave in different ways. In this article, we'll learn more about the position property and the types. let's start with the very first type,

1) static (default)

This is the default value. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect.

2) relative

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

                #property-1{
                         position -relative;
                         bottom-100 px;
                      }

This value creates a new stacking context when the value of z-index is not auto. Its effect on table-group, table-row, table-column, table-cell, and table-caption elements is undefined.

3) fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), or the will-change property is set to transform, in which case that ancestor behaves as the containing block.

         #1{
                  position-fixed;
                   bottom- 100 px;
                   right- 10 px

Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

4) sticky

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 top, right, bottom, and left. The offset does not affect the position of any other elements.

               #1{
                      position- sticky
                      bottom- 150 px
                      left- 10 px
                      }

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 overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

5) absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

                 #1{
                        position-absolute;
                         top: 100 px;
                      }

This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

hope you are clear about position. we will come with the new topics till then, keep learning keep exploring!