CSS Position

tutorial and example
tutorial and example

CSS Position property is used to set the position of the element. The position will be top, left, right, and bottom. All the positions of an element have following positions.

  1. CSS Static Positioning
  2. CSS Fixed Positioning
  3. CSS Relative Positioning
  4. CSS Absolute Positioning

CSS Position Properties:

property Description values
bottom It is used to set the bottom margin edge for a positioned box. auto, length, %, inherit
clip It is used to clip an absolutely positioned element. shape, auto, inherit
cursor It is used to specify the type of cursors to be displayed. url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
left It is used to set a left margin edge for a positioned box. auto, length, %, inherit
overflow It is used to define what happens if content overflow an element’s box. auto, hidden, scroll, visible, inherit
position It is used to set the type of positioning for an element. absolute, fixed, relative, static, inherit
right It is used to set a right margin edge for a positioned box. auto, length, %, inherit
top It is used to set a top margin edge for a positioned box. auto, length, %, inherit
z-index It is used to set stack order of an element. number, auto, inherit

1) CSS Static Position

CSS static position is the default position for HTML element. It is not affected by the top, bottom, left, and right properties.

2) CSS Fixed Position

CSS fixed position is used to fixed the text on the browser. The fixed test is positioned relative to the browser window and doesn’t move even you scroll the window.

Let us see an example of CSS static position:

Try Now

3) CSS Relative Positioning.

CSS Relative Positioning property is used to set the element relative to its normal position.

Let us see an example of CSS relative positioning:

Try Now

4) CSS Absolute Position

The absolute position is used set the position of the relative. You can place an element anywhere on a page by using absolute position.

Let us see an example of CSS absolute position:

Try Now