What is the difference between absolute, fixed, static, relative position of control?

When talking about such CSS properties, we shouldn't use the term "control" which is related to ASP.Net Web Forms, but rather, use the term "element", which is used by web people to describe UI elements created from an HTML document.

position is a CSS property that can have one of the values absolute, fixed, static or relative. It can be also set to inherit and can be set to the newly adopted property sticky.

Three of these values (absolute, fixed, and relative) is combined with the usage of the left, right, top and bottom properties to set the position coordinates of the element. You may use one or two of them.

• relative: Positions the element in normal flow, meaning the place it normally should be in, and adds the values given by left, right, top and bottom to the position. For example, if you give an element the following CSS: position: relative; left:5px; top:5px, it will be shifted5 pixels to the right and to the bottom from its normal position.
• absolute: Positions the element in the coordinates given by left, right, top and bottom inside the first ancestor with position property set to anything except static. If there's no such ancestor, it will be positioned inside the body element. For example, if you have a div inside another div, and the parent div has its position set to relative, if you give the inner div the following CSS: position: absolute; left:5px; top:5px, it will be positioned5 pixles away from the top and left edges of the parent div. This is how floating panels are created in web pages.
• fixed: Is the same as absolute, but the difference is that the element is positioned inside the viewport. The "viewport" is the recatngular area of a web page that your web browser displays at a time. For example, if you give an element the following CSS: position: fixed; left:5px; top:5px, it will be positioned5 pixles away from the top and left edges of the viewport and will stick there however you scroll up, down, left or rigth. This is how sticky headers and panels are created on web pages.
• static: Is the default behaviour, which means that the browser positions the element as its appearance in the HTML document and the normal flow dictates. The left, right, top and bottom are ignored then.

These property are easier to learn by viewing visual examples and by experimenting using the developer tools of your browser. Press F12 to open the developer tools, and try to play with these properties to better understand their effect. And prior to that, refer to the documentation at MDN, which better explains the properties with visual examples, and details about browsers support.