how to change the position of div in CSS 

To change the position of a div there are multiple ways. You can change the position of the div by changing the top, left, right, and bottom properties of a div position if it is set to position fixed or absolute


CSS position

There are the following types of positions in CSS. the default position is static in the CSS.

  • static
  • sticky
  • fixed
  • absolute
  • relative

It depends on your requirement that which type of position you want to use to position an element in CSS.

position absolute and relative works relative to the nearest non static patrent. For example , if you button wrapped with two div , then it works relative to the nearest non static parent (which postion is set other than non static).

position : static

By default, each element has a static position. The static position has no effect on the top, left, right and bottom properties.

  position: static;

position : fixed

The fixed position is used to fix an element in HTML. If you want to fix an element in HTML structure you can use fixed position. Position fixed works relative to the viewport, the element with position fixed always stays at its position even if the page is scrolled. For example – The WhatsApp button is fixed on the right bottom of the websites.

top, left, right, and bottom properties are used to position an element with a position fixed.

Staticdefault position
position: static;
absoluteTo position an element in an element on the specific position
position: absolute
relativeTo position an element relative to itself
position: relative
fixedTo fix the element relative to the viewport
position: fixed
stickyposition toggled between fixed and relative
position: sticky

position : absolute

Position absolute is used to position an element relative to an element in CSS.

Example: You want to fix a button in a div at a specific position.

<div class="post">
    <p>how to fix div in css</p>
   <button>read more</button>
.post button{
how to change the position of div in CSS 

position : sticky

position:sticky is used to stick the element in a specified position from an element when scrolling. For example – a sticky header on a webpage

A sticky element’s position is toggled between fixed and relative. The element is positioned as relative until the specified offset is met in the viewport or parent element. If offset is met the element is positioned as fixed


If you are using position absolute make sure its parent position is nonstatic (other than position: static) otherwise your desired result can’t be made.

About Author


Order for website design

Help :