Positioning is a property of WikiText, CSS, and HTML, that is used to position elements. There are five types of positioning: absolute, fixed, relative, static, and sticky positioning.

Types of Positioning

Absolute

Absolute positioning is when the element stays in that part of the page, and does not collapse with any other margins on the page. To do absolute positioning, the code would be:

<div style="overflow:auto;height:100px;width:100px;background:white;border:5px solid black"><div style="position:absolute;">see? this text is how it looks like with absolute positioning!</div>filler...</div>

Result:

Fixed

Fixed positioning is when the element's position is fixed on that exact point on the page—it will not move, even with other elements around it. It is similar to absolute positioning, and is mainly used for popups and putting fixed images on profiles/message walls.

Code:

<div style="overflow:auto;height:100px;width:100px;background:white;border:5px solid black"><div style="position:fixed;">see? this text is how it looks like with fixed positioning!</div>filler...</div>

Result:

Relative

Relative positioning is when the element's position is relative to where you are scrolling on the page. To do relative positioning, the code would be:

<div style="overflow:auto;height:100px;width:100px;background:white;border:5px solid black"><div style="position:relative;">see? this text is how it looks like with relative positioning!</div>filler...</div>

Result:

Static

Static positioning is a type of positioning that doesn't allow top, bottom, right, and left properties to work with it. It is similar to relative positioning.

<div style="overflow:auto;height:100px;width:100px;background:white;border:5px solid black"><div style="position:static;">see? this text is how it looks like with static positioning!</div>filler...</div>

Result:

Sticky

Sticky positioning is a type of positioning that sticks to the top of the box when being scrolled, the code is:

<div style="overflow:auto;height:100px;width:100px;background:white;border:5px solid black"><div style="position:sticky;">see? this text is how it looks like with sticky positioning!</div>filler...</div>

Result: