fbpx
April 3, 2020
css positioning
CSS

CSS POSITIONING | Set The Position Of Web Page Elements Using CSS

               In this Tutorial we will be discussing about CSS positioning and how you can easily define the position of the elements on your web page using CSS position property. In our previous we tutorial discussed about CSS VISIBILTY and how you can define the visibility of elements on your web page using the visibility CSS property. If you haven’t gone through the tutorial you can do so using the link below.

Read previous tutorial on: CSS VISIBILITY | Steps to Set the Visibility of Elements on Web Pages

CSS POSITIONING

CSS allows us to set the position of elements on our web page. With CSS we can place an element on any position of our web page. We can also make use of three position properties to define the position of our element on the web page. These properties include:

  • The Absolute positioning
  • The Relative positioning
  • The fixed Positioning

The Absolute positioning

The absolute positioning is used to position any element relative to the top left corner of the web page. We can move the element in any direction relative to the top left corner of the web page using the direction values below

  • To move the element to the left – we use a negative value for the left position e.g left: -200px
  • To move the element to the right – we use a positive value for the left position e.g left: 200px
  • To move the element up – we use a negative value for the top position e.g top: -200px
  • To move the element down – we use a positive value for the top position e.g top: 200px

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>ILLUSTRATION OF ABSOLUTE POSITIONING PROPERTY</title>
</head>
<body>
   <p style="visibility: visible; position: absolute; top: 200px; left: 200px; " >
      ILLUSTRATION OF ABSOLUTE POSITIONING PROPERTY ON A PARAGRAPH 
   </p>
  
</body>
</html>

RESULT

Absolute CSS positioning

The Relative Positioning

The relative position is used to set an element to a new position in relative to its initial normal position. For example if the position of an element is X and we set the relative position to left: 50px. This adds 50px to the left side of the element starting from position X. Thereby moving the element to the right by 50px from position X. Other positioning you need to know about include:

  • Moving the element to the left – we use a negative value for the left position e.g left: -200px
  • To move the element to the right – we use a positive value for the left position e.g left: 200px
  • To move the element up – we use a negative value for the top position e.g top: -200px
  • To move the element down – we use a positive value for the top position e.g top: 200px

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>ILLUSTRATION OF RELATIVE POSITIONING PROPERTY</title>
</head>
<body>
   <p style="visibility: visible; position: relative; top: 0.02px; left: 0.02px; " >
      ILLUSTRATION OF RELATIVE POSITIONING PROPERTY ON A PARAGRAPH 
   </p>
  
</body>
</html>

RESULT

ILLUSTRATION OF RELATIVE POSITIONING PROPERTY

ILLUSTRATION OF RELATIVE POSITIONING PROPERTY ON A PARAGRAPH

The Fixed Positioning

The fixed positioning allows us to set a fixed position for an element on the web page. irrespective of whether the page scrolls the element will retain its position. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>ILLUSTRATION OF FIXED POSITIONING PROPERTY</title>
</head>
<body>
   <p style="visibility: visible; position: fixed; top: 0.02px; left: 0.02px; " >
      ILLUSTRATION OF FIXED POSITIONING PROPERTY ON A PARAGRAPH 
   </p>
  
</body>
</html>

RESULT

ILLUSTRATION OF FIXED POSITIONING PROPERTY

ILLUSTRATION OF FIXED POSITIONING PROPERTY ON A PARAGRAPH

CONCLUSION

As said earlier we use the CSS positioning property to control the position of an element or content of a web page. This is very important when you intend placing an element on a particular position. Lets move to the next tutorial on CSS LAYERS

Leave a Reply

Your email address will not be published. Required fields are marked *