Positioning with CSS

To continue our lessons with CSS, an important skill to have as a budding developer is the ability to position and place your contents on your site. When you start to build more complicated websites and apps you’re going to have multiple layers that need to be able to interact with each other without disturbing the flow. In this brief article, we’re going to go over the four main ways to position items on your page, as well as a fifth piece of information that his greatly helpful.

Remember that this can all be done when writing in CSS and doesn’t require you to change what is happening in your HTML. While it does sometimes have to do with your <div>s or other groupings in your HTML, this is a simple introduction which requires very simple code input to change the position of certain elements only in your CSS file.

As pictured above, the four main ways to position your contents on the site are static, relative, absolute, and fixed. We will run through each of these quickly to learn how they can each be used effectively!

Static

When adding new blocks, or pieces of content to your site or app, you will be adding items from the top left of the page downward. This is the default positioning, and make it so that each item doesn’t overlap with each other. This is done simply by writing in “position: static;” in your CSS element, or by not signifying (as it’s the default). These static elements can be paired with a width and height, but otherwise they are simply placed in the site without overlapping.

Relative

Having a relative positioned element in your app allows you to place your content on the page relevant to the static positioning. Pay attention to the middle picture above; the item is slightly moved to the right. When put into the code, you signify this by putting in “position: relative;” and then how you want it placed by putting in the either top, left, right, or bottom position. This is done through pixels, or px, to say where you want to item to be pushed out to.

If you put in “top: 40px” for example, the item will be moved downward 40 pixels (think of it as adding a 40 pixel cushion to the top of your element). Now you can add it to one or all four of these directions to make the item get relatively placed.

Absolute

Now pay attention to the third image for an absolute placement of content on your site. How is this different than a static or relative position? The main difference to an absolute placement of an item on the page is that all the other content on the site or app will ignore what is happening with that particular piece of content. The closest parent element will determine the relative placement of an absolute object.

You put in the absolute positioning similarly to how you do with a relative element; by typing in “position: absolute;” and adding top, bottom, left, and/or right with the amount of pixels to the positioning. The difference here is that, since the content is ignored, as a default placement the item will be placed directly on top of the other content put in statically (making it two layers).

Fixed

While absolute positioning makes the content ignored by other content on the page, the item will still scroll with the rest of the content on the page. The way to keep items from scrolling with everything else we would have to signify that the item is fixed. We can do this by writing in “position: fixed;” and the content scrolls with you as you scroll down the page, being fixed in its position. The positioning can also have added pixel positioning like relative and absolute; with top, bottom, left, and/or right.

Z-Index

A z-index in CSS allows us to make elements on the page have layers. When we signify if the element has a z-index, we can give it a numeric value and that says how its placed. Here in the example above we can see that the pink square is above the green square; this is done by giving both items a z-index attribute, and giving the pink box a higher number puts it more forward in the layers. This allows us to control the content easier and choose what is seen first in the layers on top of our relative or absolute positioning.

Continue to play with positioning and there are plenty of games online to get better! Knowing how to place items on your app or site is an extremely important tool for any developer, and the most you practice the more natural it will become. Try some of the different element positioning games to become a natural!