Positioning Elements on A Web Page PART 1

6 min readJun 19, 2019

Web designs have become complex. Nowadays, it is not enough to have some content online. The organization and presentation of your content determine the number of time users spend on your website. The website today is characterized by complex presentation and animations

HTML and CSS enable developers to create attractive web pages. Understanding how to position various elements at different positions on a page by a beginner is very important. Understanding the position property would come in handy for anyone intending to start a career in web development. The purpose of this article is to delve into the position property and try to understand how it can be implemented.

Mastery over this concept prior to introduction to any framework can be helpful. Below is an image depicting a web page nicely designed with different elements at different positions.

Position property :

The position property specifies the type of positioning method used for an element .position can accept five values these are :

Static
Relative
Fixed
Absolute
Sticky

When these values are assigned to the position properties it enables the developer to move the element in diverse ways, by either moving the element some distance from the left, right, top, bottom to a specified position.

position: static;

Html elements by default have their position value set to static, hence it is not necessary for the developer to declare “position: static;” unless he/she wants to overwrite a position value.

An element with a position set to static behaves quite differently from other values. When an element has a position static we can move it around our web page by modifying its margins. Margin is also a property that accepts %, px, rem, etc… units of distance.

let us create a box on a web page with Html and CSS and move around on the web page

this will output this on our web page

now we can assign margin at the top, bottom, right, left in other to move our box to different places on the page.we do not need to restate position: static ;

this results in

you may set the margin:0 auto; to the center element

position: relative;

An element with position relative is positioned relative to its current position. This allows elements to be able to respond to the left, right, top and bottom properties.

index.html

this will output

position: absolute;

When the position of an element is set to absolute, the element is placed relative to the element closer to it or makes it relative to the body of the document. Absolute value takes the element out of the normal flow of the page and can enable you to position the element at any place you wish. It responds to left, right, bottom, top property and it also responds to the transform property

The Yellow Square is Position Absolute to the Red Square

position:fixed;

When an element is given a “position: fixed;”, it makes the element relative to the Viewport, consequently elements with the position value fixed do not move on scroll they remain fixed to the position specified through the left, right, top, bottom properties.

this will output, the blue circle will be fixed to its current position even if scrolled. Setting top to zero and left to zero will stick it to the top, this approach is usually used in navigation bar development

position:static;

When an element is given a position value static, the element’s position becomes relative to the screen scroll.Use right,left,top,bottom to position element.

index.html

this will output a sea blue square with a position value set to sticky. The sticky square will toggle between relative and fixed. When top hit zero it becomes fixed else it assumes a relative position.

positions are important in modern web site because they allow the developer to stick different boxes over each other. fixed and sticky are used widely in the navigation bar to stick it to the top.

let us use this knowledge to develop a layout with semantic HTML based on the concepts discussed above.

index.html

this file is going to house six elements that are going to position with CSS to give us a basic web page layout.

style.css

Change the default position of the nav element from static to fixed

Change the default position of the left_el element from static to absolute then, position element accordingly.

Change the default position of the right_el element from static to absolute then, position element accordingly.

Change the default position of the foot_row element from static to absolute then, position element accordingly.

this will lead to the creation of this layout

Conclusion

There are many ways to position elements on a web page. Read on display to further reinforce your mastery of positioning elements on a web page.

If you want to get more information on the topic, https://css-tricks.com/almanac/properties/p/position/

This article seeks to make positioning of element easy to beginners because it forms the basis of a good web page design

If you have a question, let me know. If you want to keep up with what I’m doing, follow me on LinkedIn or Twitter