Position

Submitted by Yorkiebar on Thursday, January 23, 2014 - 10:40.
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

About text formats
  • 41 views