#cssposition

Firstly, in regards to stripping the default CSS properties of a website, web authors often use the code from this website to do a CSS Reset: https://meyerweb.com/eric/tools/css/reset/. This action removes all the default padding, margins and aesthetics in place, like a fresh, blank canvas. Nevertheless, the developer needs to re-add some things such as a 1.5 line height! After this, it is recommended to use a container just inside the Header component (to make 100% wide) with another container and flexbox inside that to layout the navigation, logo, etc. Then, the Footer and Main components would have their own containers too so that the Footer can also be made 100% wide and the Main can be whatever the designer pleases.

When preparing to add a giant image to our Home pages, it is important to note that Viewport Height (VH) refers to the screen size of the browser; 100VH being the maximum size. Next, the CSS property ‘Position’ is used to place the image and for other things also:

position: static; (the default position setting)

position: relative; (position is relative to where is was originally and leaves gap)

position: absolute; (position moves from its parent/viewport but does not leave a gap)

position: fixed; (position is fixed and stays as it is on the viewport)

For a clearer example, you can look at this image:

This leads us onto how to make the website’s menu stay on screen on as you scroll - you can use position: fixed; ... In the image at the top of this post you can see how the masthead-menu bar stays on screen as you scroll on https://www.billboard.com/ . 

CSS Property Image Reference: