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

div{
position:fixed;
top:100px;
left:100px
}

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.

div{
  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.

div{
position:fixed;
top:0;
left:0;
}

Static	default position position: static;
absolute	To position an element in an element on the specific position position: absolute
relative	To position an element relative to itself position: relative
fixed	To fix the element relative to the viewport position: fixed
sticky	position 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>
<div>

.post{postion:relative}
.post button{
  position:absolute;
  left:0;
  bottom:0
}

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

header{
position:sticky;
top:0;
}

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.