29/01/2022

CSS Position & Absolute, Relative, Static, Sticky, Fixed

CSS Position

CSS position property is a property that helps us determine the position of HTML elements within the page. In addition to the Position property, the top, bottom, left and right properties of CSS are also used as helpers for positioning.

CSS Position Types

  • position: static;
  • position: relative;
  • position absolute;
  • position: fixed;
  • position: sticky;

Position Static

Static is the default position of all HTML elements. If an HTML element is not given a position value, it is always static. Top, bottom, right, left, and z-index CSS properties have no effect on Position static.

Position Relative

When the HTML element is given a relative value, it maintains its position and sets the zero point as its position for the top, bottom, left, and right values. When the top, bottom, left and right values ​​on the page are changed, the space occupied by the element with relative property does not change, it behaves like static.

<style>
.box {
   display: inline-block;
   width: 100px;
   height: 100px;
   border: 3px solid #000;
   text-align: center;
}
#box-3 {
   position: relative;
   top: 30px;
   left: 30px;
   background-color: #000;
   color: #fff;
}
</style>

<div id="box-1" class="box">box</div>
<div id="box-2" class="box">box</div>
<div id="box-3" class="box">relative box</div>
<div id="box-4" class="box">box</div>
box
box
relative box
box

Position Absolute

A value of Absolute distorts the position of the HTML element on the page flow. As with the position relative value, the space it occupies does not act as static and maintain its position, the page flow scrolls. The element with the absolute value is positioned in a parent element with the nearest relative value. If there is no container with relative value on it, the element with absolute value is positioned in the upper left corner of the page. Top, bottom, left and right values ​​help position the element on the page.

Position Fixed

Fixed value is similar to absolute value. The fixed value also breaks the position of the HTML element on the page flow. With the fixed value, the HTML element can be fixed to a desired point on the page. Top, bottom, left and right values ​​help position the element with fixed value on the page.

Position Sticky

Sticky value can be thought of as a mixture of relative and fixed values. The sticky positioned element remains fixed at the specified point until it crosses a certain threshold. This particular point is a parent container element of the sticky positioned element.

Example;

.sticky {
   position: sticky;
   top: 20px;
}

An element with this CSS property appears 20px below the page top at a fixed point on the screen until the last threshold of the container element. Top, bottom, left and right values ​​help to position the element on the page with its sticky position.

Note: The ball feature must be added for the sticky position to work.

Source :

https://developer.mozilla.org/en-US/docs/Web/CSS/position