How to Learn Difficult Concepts of CSS Positioning [Beginners Guide]

In recent years, jobs are shifting more towards Machine Learning(ML), Artificial Intelligence(AI) technologies, both of which need significant coding skills. With the imminent threat of job losses to ML, AI, and other emerging technologies in the near soon, there are currently fears among employees that their jobs are about to be taken by robots. Consequently, there have been a lot of career changes today than ever before where people from different backgrounds are acquiring skills in the above-mentioned technologies, data analysis, as well as learning how to code. Looking at the trend of events in today’s dynamic labor market, coding is arguably among the skills that seem to be future-proof. For this reason, despite the seeming difficulty of learning how to code for someone without a traditional computer science background, people from all walks of life are venturing into coding by the day. In my effort to keep moving forward in my career, I also venture into coding. Although I have an electrical and computer engineering background, my coding journey is full of ups and downs like many other beginner developers. This probably has something to do with the fact that I started my career as an electrical engineer before switching to computer engineering. While the two fields are somewhat related, I still had some challenges at the early stage of the transition. This is because I did not have a full grasp of some of the fundamental concepts of computer science. However, a strong focus on my ultimate goal of becoming a professional developer, as well as personal motivation and a strong commitment to learning kept me going. After graduating from the university. I started reading books and watching some video tutorials on YouTube. To improve my coding skills. but, there was After graduating from university, I started reading books and watching some video tutorials on YouTube to improve my coding skills, however, there was no significant improvement until I joined the Microverse. One of the major challenges I encountered in the HTML & CSS curriculum was the of HMTL elements using CSS, especially the positioning. Because positioning is one of the most useful concepts in CSS, it became a real concern for me. Luckily, because of the nature of the Microverse program which involves pair programming, my coding partner at that time, who is more experienced in this area, explained the whole concept of positioning to me. I also found some additional materials on the subject on the Internet. With the knowledge I have acquired in the Microverse program so far, I can now create a website with much ease. positioning relative and absolute Considering the struggles and frustration I went through trying to understand positioning, I intend to share the knowledge I have acquired on the subject with fellow learners, especially those that are currently going through what I went through in the past. While this may not be a detailed discussion on positioning, I believe that this brief overview of CSS positioning will help someone to see the light at the end of the tunnel. An Overview of Positioning in CSS To start with, positioning is simply a CSS property used to change the position of an element on a website. But the different values for this property and how they interact with each other can be confusing for beginners. The different types of positioning values include: 1.) 2.) 3.) 4.) ; 5.) Static; Relative; Fixed; Absolute Sticky. 1.) : By default, HTML elements occupy the entire space and start in a new line. This is because the default position value is static, which means not positioned. The problem with static positioning is that it is not possible to change the positions of an element. Because they are in the normal document flow. Static 2.) In relative positioning, a given element is relative to its normal position. When a position is first applied relative to an element without the addition of any other positioning properties. such as top, bottom, left and right, you will not see any change on the page. When you add some extra positioning attributes to the element, only the given element moves relative to itself. The following example explains the concept more. Relative: As you can see in the above diagram, I have applied two more attributes to the first element: right: 28px and top: 60px. The addition of these attributes has shifted the element from its initial position, while other elements stay in the same place. Important! They are things you need to keep in mind while setting a position — relative to an element. you cannot use top, right, bottom, and left to change the size of a position of the element, those values will only shift the element up or down, left or right. You can use top or bottom, but not both together. 3.) Is relative to the viewport or is positioned related to the browser window. which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are to position the element. When positioning an element, you’re not required to specify values for all four sides. You can specify only the sides you need and then use width or height to help determine its size. position: fixed; top: 8px; right: 20px width: 50% Fixed: Consider this example: These would position the element. 8px from the top and 20px from the right edges of the viewport with a width of 50% of the viewport width. By omitting both bottom and height properties. the element’s height will be determined by its contents. 4.) It works the same way as fixed positioning. except that it has a different containing block. Instead of its position being based on the viewport, its position is based on the closest positioned parent element. When there is no positioned parent element, the element will be related to the main page itself. Absolute positioning enables you to place an element exactly where you want it to be. The properties top, right, bottom, and left placed the edges of the element within its containing block. Absolute:Absolute: As you can see in the above diagram. The parent element has the position set to relative. when you set the position of the child element to absolute, any more positioning will be done relative to the parent element. The child element moves relative to the top of the parent element by 50px and right of the parent element by 20px. 5.) The element is positioned based on the user’s scroll position. Its toggles between relative and fixed. depending on the scroll . It is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. Sticky: position Conclusion It’s impossible to cover everything in a single article but here are a few links where you can find more information on the subject: , . I hope this article will provide some insight and clears the doubts some people may have on CSS positioning. w3school freeCodeCamp