Style:

*{padding: 0;margin: 0;}

.static{width:300px;height: 300px;}

.relative{margin:50px 50px;width: 200px;height: 200px;position: relative;top: 50px; }

.absolute{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}
.fixed{position: fixed;top: 0;left: 0;width: 100px;height: 100px; }

Rendering:

Summary!

By setting the vertical and horizontal position of the element, you can:

1. Relative positioning: The element moves "relative to" its starting point. The element on the picture has moved 50px downwards relative to the starting point. It occupies the original space.

2. Absolute positioning: The element moves "relative to" its parent element (or its nearest positioned ancestor element). The coordinates of the upper left corner of the element on the diagram coincide with its parent element. It doesn't take up space.

3. Fixed positioning: The element moves "relative to" the viewport. The element on the graph moves to the position of coordinates (0,0). It doesn't take up space.