Position

Position: static

Static is the default position value. Static elements are positioned in the order specified by HTML, and cannot be moved by using CSS right/left/top/bottom properties.

Position: relative

Relative position allows moving the element in CSS relative to its default position using the right/left/top/bottom properties. For example, the code below will move the left side of the element over.

p {
    width: 200px;
    height: 300px;
    background-color: orange;
    
    position: relative;
    left: 50px;
}

Notice that the left property doesn't move the entire element to the left - it moves the left side of the element in the direction of the rest of the element. That actually moves the whole text block to the right. Similar logic works for right, top, and bottom properties.

Position: fixed

"Position: fixed" sets the position of an element relative to the viewport (the area of the page the user sees). This means that when you scroll, a fixed element will remain in the same spot, like an alert. To test this out for yourself, you may need to add some content to your page to make it large enough to allow scrolling.

p {
    width: 200px;
    height: 300px;
    background-color: orange;
    
    position: fixed;
    left: 100px;
    top: 100px;
}