DEV Community

Cover image for Positioning a navbar and logo in Landing Page
Nava
Nava

Posted on

2 1

Positioning a navbar and logo in Landing Page

Introduction

Positioning is often overlooked property in CSS. This may be because the elements normally follow the flow of the document and positioning is not always needed.The elements of an HTML document can be either block elements like p,div or h1 that spans through entire line or inline elements like span or images which fills the surrounding space in a container.There are four basic positioning properties that are static, relative, absolute and fixed.

Static and Fixed

The static is dafault positioning which is normal flow of elements.The fixed positioning places an element at a certain position which remains unchanged on scroll or resizing the browser window.Fixed positioning removes an element from the normal flow of the document, which is similar to absolute positioning.In example, an unordered list is positioned fixed at bottom of browser window with 20px pixels from right.



ul {
    position: fixed;
    bottom: 0px;
    right: 20px;
}


Enter fullscreen mode Exit fullscreen mode

Relative positioning

The other two positioning that needs more illustrations are relative and absolute positioning. The relative positioning is basically moves an element from the original position(normal flow of document) to a new position specifically dictated by values of left, right, bottom and top properties. Relative positioning does not affect the surrounding elements or parent elements.



.nav-bar {
    position: relative;
    top: 0px;
    right: 0px;
}


Enter fullscreen mode Exit fullscreen mode

In above code, lets assume a menu with class .nav-bar is pushed from normal flow to top-right corner from its usual position.

Absolute positioning

In contrast, the below code places the element shifted with coordinates (20px, 25px) from the left corner of the browser window.Coordinates for absolute elements are always relative to the closest container that is a positioned element.



.logo {
    position: absolute;
    top: 25px;
    left: 20px;
}


Enter fullscreen mode Exit fullscreen mode

So, if we change .logo's parent element which may be a header element to be relatively positioned, it should appear in the position 25px from top and 20px from the left of its parent element instead the browser window.

Free Web Learning Background animation

Billboard image

Monitoring as code

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay