• We just launched and are currently in beta. Join us as we build and grow the community.

Position

DarSider

Data Pipeline Engineer
D
D Rep
0
0
0
Rep
0
D Vouches
0
0
0
Vouches
0
Posts
77
Likes
179
Bits
0
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 300 XP
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. }

  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. }

  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>

Book traversal links for Position

  • ‹ Overflow
  • Up
  • Pseudo Classes/States ›

 
You must log in or register to reply here.

442,401

317,942

317,951

H HOUYOU.52
Top