Loading

Position

Submitted by: 
Language: 

Introduction:
This is the seventh part in my CSS Styling tutorials, in which I will be covering position.

What is Position?
Position is used to set the behaviour of how the elements display on-screen within the web browser.

Structure:
position: {type};

Example:

  1. position: fixed;

Values:
relative - Takes in to account the elements around it.
absolute - Does not take in to account the elements around it, margin and padding go from the edge of the containers or documents.
fixed - Only takes in to account the width and height of the browser window.
inherit - The value of the display property will be inherited from the parent element.

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class='myClass'

... to the attributes of that element if you chose a class, or...

  1. id='myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example:

  1. <html>
  2. <head>
  3. <style>
  4. .fixed {
  5. background-color: #000;
  6. color: #fff;
  7. width: 300px;
  8. height: 100px;
  9. position: fixed;
  10. bottom: 0px;
  11. //Fixed to the bottom of the document (footer)
  12. }
  13.  
  14. .relative {
  15. background-color: #000;
  16. color: #fff;
  17. width: 300px;
  18. height: 100px;
  19. position: relative;
  20. left: 100px;
  21. //Takes in to account other elements
  22. }
  23.  
  24. .absolute {
  25. background-color: #000;
  26. color: #fff;
  27. width: 300px;
  28. height: 100px;
  29. position: absolute;
  30. left: 100px;
  31. //Doesn't take in to account other elements.
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class='fixed'>Fixed</div>
  37. <div class='relative'>Relative</div>
  38. <div class='absolute'>Absolute</div>
  39. </body>
  40. </html>

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.