CSS Displays and positions
The display and position properties will be used to give structure to your webpage and build custom and interesting layouts. There are 2 distinct differences between the two, the display is used to change the display behavior of elements like divs, containers, and text. The position changes the type of positioning an element has to your webpage, this may seem a bit like the same at first glance so let me give you a more detailed explanation on both subjects.
CSS Display
There are a lot of different display types within CSS but most of these are rarely used or only used in niche circumstances because the browser defaults to these display types. I will discuss the most used variants in this topic. Keep in mind that 2 more recent display types are used all over the web right now but these two deserve a topic on their own these display types are display: flex and display: grid.
Display: block
The block display is often the default display type for HTML and the browser inputs a block display make sure your elements use the full with of your webpage this way every element will be stacked on top of each other like building blocks.
Display: inline
Display inline is the default display for text elements like span tags. This is mainly used for elements without a height or width because any declared height or width property does not affect these elements.
Display: inline-block
This is a combination of the two display types. these are blocks stacked on top of each other but the height and width properties can be set to these elements. With this display type, you can have multiple elements populate the same row on your website like a navigation structure in the header of your webpage.
Display: none
This display is an interesting one because this will hide the element and is mainly used for animations and hiding or showing popups. There is a big difference between this display type and the opacity property because the display none takes the element out of your HTML dom meaning there will be no whitespace as opacity only makes it invisible but will leave the space this element had occupied.
These are the different display types in short that are used most of the time here is a list of other display types and their uses.
CSS Position
Positioning is an interesting property because they have certain ways of positioning on the page but they can also interact with each other. With positioning, you get to use four more properties to position your element: top, bottom, left, and right.
Position: static
This is the default positioning for every element on your HMTL page. The static position is not affected by any top, bottom left, or right properties and will sit statically on your webpage.
Position: relative
With this position, you can change the position of your element relative to the old position of the same element by using the top, bottom, left and right properties with it. It can also act as a container for your absolute positioning of child elements but more on this at the end. Keep in mind that the old space that the relative element occupied will still be reserved for this element this way you can get some big white gaps in your webpage you can always counteract this with a negative margin on that same element.
Position: absolute
This will give your element an absolute position meaning if you say top 10px it will move 10px from the top of your webpage no matter what content is occupying this space now it will just sit on top of it. It will calculate the top, bottom, left, or right properties you use from the nearest ancestor with relative positioning. If there are none it will go for the dom.
Position: fixed
The fixed positioning looks a lot like absolute in the way that 10px from the top will move it 10 pixels from the top but there is one big difference, the absolute positioning works with the whole webpage and its ancestors but the fixed position works only with the viewport and will always stay on this place inside the viewport. If I would say bottom 10px it will always stay 10 pixels from the bottom of the viewport if the user scrolls down a webpage this element will scroll with the webpage staying on top of all other elements. Think about those chat icons on websites that will follow you around the whole webpage no matter where you scroll to.
Position: sticky
A sticky element works the same as your fixed element but also toggles between fixed and relative based on the user’s scroll behavior and position. It is a relative position until the user reaches a certain offset at that moment in changes to a fixed state. Think about sticky menu’s that stay at the top of your webpage even if you scroll down the page.
Conclusion
The display and position properties are very important and widely used properties within CSS to add structure but also interesting elements to your webpage, a change in display values or position values is often used in animations and javascript interactions with your webpage. To become a good front-end developer you should learn when to use what type of display property or position property and how to manipulate these properties and values to get the result you want or need. Keep in mind there are also flex and grid display properties that are used a lot in modern web design.