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
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.
#css #positioning #programming
