Position
Specifies how an element is positioned on the screen.
p-relative
p-static
p-absolute
<div class="p-relative x"> <div class="p-relative x">p-relative</div> <div class="p-static x" style="top: 0;">p-static</div> <div class="p-absolute x" style="bottom: 10px; right:0; width: 100px;">p-absolute</div> </div>
p-static | The element is positioned according to the Normal Flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value. |
p-fixed | The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of top, right, bottom, and left. |
p-relative | The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. |
p-absolute | The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. |
p-sticky | The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. |
Top / Right / Bottom / Left
Controls the vertical and horizontal position of a positioned element.
p-top | Top position - auto. |
p-top-0 | Top position - 0%. |
p-top-50 | Top position - 50%. |
p-top-100 | Top position - 100%. |
p-bottom | Bottom position - auto. |
p-bottom-0 | Bottom position - 0%. |
p-bottom-50 | Bottom position - 50%. |
p-bottom-100 | Bottom position - 100%. |
p-right | Right position - auto. |
p-right-0 | Right position - 0%. |
p-right-50 | Right position - 50%. |
p-right-100 | Right position - 100%. |
p-left | Left position - auto. |
p-left-0 | Left position - 0%. |
p-left-50 | Left position - 50%. |
p-left-100 | Left position - 100%. |