CSS position property - Set relative, absolute, fixed position

CSS position property set an element positioning to display in web page.

CSS position property possible value relative, absolute and fixed.

CSS position:relative property

CSS position:relative property set element relatively followed by the relative offset from top, right, bottom or left.

Relative position is related to each and every around element properties (like margin, background-color and so forth).

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS position property</title>
</head>
<body>
  <div style="position: relative; left: 120px; background-color: orange; width: 120px;">
    This element is a relative positioning for each elements.
  </div>
</body>
</html>

Run it... »

CSS position:absolute property

CSS position:absolute property set element absolutely followed by the absolute offset from top, right, bottom or left.

Relative positioning element inside you can set absolute position element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS position property</title>
</head>
<body>
  <div style="position: relative; width: 400px; height: 150px; border: 1px solid orange;">
    <div style="position: absolute; top: 35px; left: 220px; width: 160px; background-color: orange;">This element is a absolute positioning for each elements.</div>
  </div>
</body>
</html>

Run it... »

CSS position:fixed property

CSS position:fixed property set element in fixed, even if window scroll vertically or horizontally element is fixed place.

CSS position fixed followed by the window offset top, right, bottom,left.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS position property</title>
</head>
<body>
  <div style="width:400px; height:150px; border: 1px solid orange; overflow: scroll;">
    <div style="position: fixed; top: 35px; left: 220px; width: 100px; background-color: orange;">Fixed element</div>

    CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat).<br />
    CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat).<br />
    CSS background-repeat property repeat image both side horizontally or vertically. CSS background-repeat property possible value is repeat, no-repeat, repeat-x (vertically repeat), and repeat-y (horizontally repeat).
  </div>
</body>
</html>

Run it... »