1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS positioning properties

With CSS positioning properties, you can specify where and how elements should be positioned.

This tutorial focuses on:

Positioning elements

The position of an element is set with the position property.

Possible values for the position property:

NOTE: The position property is often used together with some other properties!

Properties used together with the position property:

<html> <head> <style type="text/css"> p.two {position: absolute; left: 20; top: 40;} h2 {position: relative; right: 40;bottom: 60;} </style> <title>Positioning elements</title> </head> <body> <p>This paragraph has a default position.</p> <p class="two">This paragraph has an absolute position. </p> <h4>This heading has a relative position.</h4> </body> </html>

This paragraph has a default position.

This paragraph has an absolute position 20 pixels from the left and 40 pixels from the top relative to its containg block.

This heading has a relative position that is 40 pixels from the right and 60 pixels from the bottom relative to its default position.

Stacking elements

Elements are stacked using the z-index property. By stacking elements, you can specify which elements will appear in front of other elements. Elements have a z-index of 0 by default.

<html> <head> <style type="text/css"> img {position:absolute; left:0px; top:0px; z-index:-1;} </style> </head> <body> <img src="/images/apple.jpg" width="100" height="180"> <p> This paragraph will appear stacked on top of the image because it has a higher <b>z-index</b>. The <b>z-index</b> of this paragraph is 0, while the <b>z-index</b> of the image is -1. </p> </body> </html>

The z-index of the paragraph is 0 (by default). The z-index of the image is -1. The paragraph will appear stacked on top of the image because it has a higher z-index.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information