What is CSS positioning?

In this modern world, designs are a bit complex and required a modern way to show our elements on web pages. Don't worry about reading the term complex, CSS Positioning is not complex at all. To keep our elements wherever we want on our webpage or application, we use position property.

To position our element just like I have displayed in the image below, we can use position property. Not only this, but it serves you more power when you start using it. Some of the cases can be by stacking the element on one another, positioning your navbar on top or App Bar at bottom of the page, etc. Also, by sticking a footer or header on top or bottom of the app or webpages.

Let us move further to understand it in a better way. So, let's get started!!!.

Before moving into the actual concept of positioning, let's get clear about four simple properties top, bottom, left, right which are also shown in the image. These are the only properties that all developers use to move an element around the screen.

Hope we are clear that whenever we want to move our element on the webpage we can use these four properties. But wait..., Are these properties will work if use them directly in our CSS property?

🤣🤣🤣🤣🤣

Some might have guessed. Yes, these properties won't work without position property. To use them efficiently CSS consortium has provided five main properties. They are static, relative, absolute, sticky & fixed . Let's discuss them one by one.

Positions in CSS

There are five types of positions mentioned in CSS. With time people forget them but now you won't. Just remember, with this Image. Just like Pandavas, we have also five positioning properties.

Static

position: 'static' is the most common property and doesn't require much attention. By default all elements in HTML have `position: 'static'.

top, bottom, left & right doesn't work with static property. It just flow the normal flow of the page.

Example

HTML

<body>
  <div class="box1">Box1</div>
</body>

CSS

.box1{
 width: 100px;
  height: 100px;
  background-color: chocolate;
  position:static;
}

Result

Relative

position: 'relative' is used to move HTML elements from their normal position. Without applying top, bottom, left & right, position: 'relative' doesn't work. To see some changes you must provide some values.

Example

HTML

<body>
  <div class="box1">Box1</div>
</body>

CSS

 .box1{
 width: 100px;
  height: 100px;
  background-color: chocolate;
  position: relative;
  top: 100px;
  left: 100px;
}

Result

Absolute

position: 'absolute' is used to move HTML elements from their viewport or screen position. Without applying top, bottom, left & right, position: 'absolute' changes can be observed. It's a bit mischievous and beginners get confused with it. To understand it well, let us change some code in HTML .

Example

HTML

<div class="box-container">
        <div class="box">Box</div>
</div>

CSS without absolute

 .box {
  width: 100px;
  height: 100px;
  background-color: chocolate;
}

.box-container {
  border: 3px solid #5a20cb;
}

Result

CSS with absolute

.box {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  position: absolute;
}

.box-container {
  border: 3px solid #5a20cb;
}

Result

We can clearly see by adding just absolute in our CSS code, the .box-container class element has been shrined. No element inside this exist anymore, rather it has been positioned to a viewport of the screen. Now to move this Box1 element we can give any of these top, bottom, left & right.

Let's say

.box {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  position: absolute;
  top
}

.box-container {
  border: 3px solid #5a20cb;
}

Result

I hope that makes sense to you all.

Fixed

position: 'fixed' is used to fix any HTML elements from their viewport/screen position even if the page scroll down/up.

Example

HTML

<div class="box-container">
        <div class="box">Fixed</div>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi facere omnis numquam natus aut vel magnam,
            dolor, laborum praesentium voluptate laudantium. Nihil, similique aut pariatur numquam dolores debitis
            repellendus ex illum magnam. Vero libero fugit voluptate praesentium possimus nemo maxime laudantium
            voluptates, qui molestiae commodi ab doloribus eos dolorum impedit eaque architecto corporis aliquam
            cupiditate iure aliquid? Eaque repellendus officiis magni magnam et. Qui cum possimus vitae a rerum quisquam
            quo deleniti maxime id autem, cumque et asperiores excepturi dolor soluta magnam magni. Voluptate architecto
            magnam consequuntur, eaque quasi, quam veniam consequatur minima, alias aliquid ipsa aperiam quidem?
            Molestiae, itaque voluptas tempore dolorum reiciendis est. Similique esse ullam reprehenderit hic a quo sit
            ipsum atque, laboriosam, soluta aspernatur dolores voluptatem dolorem quod aliquid iste excepturi est magni
            optio necessitatibus ducimus nisi. Facilis, tempora qui. Sapiente maxime odit repudiandae, cumque, odio
            neque esse delectus ratione dolore tenetur asperiores. Aliquam itaque expedita minus assumenda deserunt
            suscipit ab debitis, ratione delectus possimus. Nesciunt distinctio, quisquam unde nulla temporibus adipisci
            hic. Obcaecati laborum sapiente unde. Repellat dolorum temporibus voluptatibus ipsam perferendis molestiae
            modi ipsum expedita minus eum facilis aut sint doloribus esse veniam eos assumenda hic, atque veritatis
            laboriosam ad. Quidem eum, in nisi quas expedita ducimus nemo, qui debitis magni aliquam assumenda ipsa aut?
            Commodi fugiat eos tempore harum sunt voluptate porro rem vero expedita, maiores, error odit accusamus!
            Nihil accusamus debitis officia! Debitis corporis dolorem consequuntur provident cupiditate impedit, eos sed
            aperiam! Amet itaque ipsa exercitationem iste laborum ipsum qui, sed nobis consectetur, eos commodi officia
            excepturi cumque atque incidunt necessitatibus perspiciatis, beatae architecto repellat voluptatem optio
            velit ratione. Consequuntur, necessitatibus modi laboriosam, nobis est tempora atque soluta doloribus
            expedita beatae ut vitae deleniti? Repellat perspiciatis deserunt sequi neque illo dolor nulla. Fugit culpa
            animi quisquam sed reiciendis laborum aut ab non molestiae eaque vitae nemo voluptates, doloribus id rerum
            dolores dicta eligendi molestias vero unde laboriosam, eveniet minima, hic vel. Laboriosam laborum culpa
            facere, iure dolorem voluptatem. Excepturi sapiente enim ex ut nemo sit voluptatibus atque praesentium
            voluptates facere cumque quisquam consectetur quis animi, facilis maxime? Molestias a id, neque consequatur
            illo modi ut enim doloribus labore sapiente suscipit error placeat voluptatibus magni explicabo autem?
            Consectetur doloremque inventore quasi assumenda, dicta commodi eligendi veniam iusto cupiditate debitis
            reprehenderit nihil corporis molestiae consequuntur fugiat suscipit! Necessitatibus quia animi excepturi
            unde. Modi, non. Nostrum odio iure ipsa, mollitia similique porro molestias eveniet corrupti quos! Delectus,
            illum. Recusandae quia hic delectus eos amet animi voluptatibus nihil. Ipsum amet nobis perspiciatis neque
            accusantium officiis corporis minus, similique animi aut. Qui beatae minima ex quibusdam esse odit nesciunt
            odio fugiat nostrum quasi optio commodi eaque dolores, architecto voluptate quam fuga accusamus neque
            corrupti minus id, culpa provident. Illo officia pariatur ab accusantium nemo sint expedita consequuntur
            voluptatem eius, minus laboriosam esse tenetur quaerat quibusdam aliquid eligendi hic beatae animi enim
            rerum eveniet eaque similique dolores. Suscipit quidem cumque eligendi explicabo, maiores enim qui? Animi
            quae quidem possimus provident tempore odit repellat doloribus, fugit aut sunt odio, ipsam dolores
            perferendis, velit sint fugiat omnis. Dolores, alias! Repellendus minima doloremque accusamus unde soluta
            sunt officia amet doloribus pariatur libero vel sapiente explicabo praesentium nulla sint quo consequuntur,
            hic vitae illo enim. Officiis, earum quis! Eligendi dolorum ipsa facilis officia est adipisci corrupti. Sint
            sapiente cupiditate ab debitis ipsam nam cum, tempore error rem molestiae quidem praesentium vel nulla! Ad
            at consequuntur corrupti maiores maxime consectetur iure dignissimos repellendus magni ipsum? Quisquam atque
            totam, eos ea fuga possimus. Ad est sapiente adipisci, eveniet esse nesciunt recusandae, eos excepturi
            quibusdam sint quam itaque veniam. Libero maiores commodi sequi beatae debitis, cum non aliquam velit
            eligendi laudantium odit sunt deleniti veritatis neque nobis facere fugiat, maxime in voluptates itaque
            ipsam totam asperiores. Quidem illum fuga inventore aspernatur magni reiciendis fugiat dolores obcaecati,
            doloremque ad tenetur aliquid facilis maxime, veniam provident corporis modi quibusdam omnis culpa. Unde
            tempore provident voluptas repudiandae vitae neque, consectetur, aut doloribus porro atque dolor maxime
            dolore. Dolores culpa deserunt vel perspiciatis ratione consequuntur autem accusantium excepturi esse
            inventore temporibus eaque asperiores atque earum, a amet neque dicta corporis repellat perferendis. Ex
            voluptas dolorum laboriosam dolor repellendus magni, obcaecati qui, sint expedita, impedit harum ratione
            tempora. Eos delectus atque dolore quisquam incidunt neque distinctio nihil aliquam, beatae eum impedit aut?
            Aperiam a ex ipsum, alias tempora esse iure similique deserunt temporibus et sint iusto perferendis magni
            ad, quae dolor placeat, quaerat modi. Rem accusamus dignissimos ratione qui dicta? Impedit magnam tempore
            est, beatae blanditiis eos officia. Voluptates reprehenderit provident voluptatum tenetur cumque vero
            blanditiis molestias qui pariatur deserunt! Esse aspernatur voluptate fugit ipsa eaque nisi quasi veritatis
            porro ipsum veniam asperiores ea neque delectus sapiente autem nostrum quam accusantium expedita, illo
            deleniti assumenda? At consequuntur aut repudiandae minus reprehenderit, dicta nisi quidem magnam suscipit
            nostrum. Dignissimos aut numquam nisi quam qui velit, voluptatibus dolorum quasi dolor odit at eaque? Vero
            rem corrupti voluptates quod consequatur, magni unde, quis deleniti, numquam doloribus dicta reprehenderit
            iure. Aut exercitationem commodi unde quod harum molestiae nobis. Quasi sint corporis tenetur veritatis.
            Sunt ea molestiae amet cumque expedita dolor quibusdam nemo officia quos inventore tenetur hic, excepturi
            consectetur assumenda natus fugiat eaque laborum tempora? Architecto maxime, eligendi perferendis autem
            voluptas enim consequatur minus molestias mollitia dolorem totam recusandae dolores incidunt quisquam
            sapiente quos impedit obcaecati a sit nam! Ea beatae placeat sunt temporibus deserunt voluptatibus veritatis
            et ipsum rerum facilis eius incidunt sint quae dolorem ab maiores tenetur harum accusantium aperiam, ipsam
            amet! Qui, dicta fuga, consectetur delectus labore tempora nostrum autem accusantium laboriosam voluptate
            suscipit saepe distinctio eos unde ab fugiat laudantium ipsam at explicabo ratione dolorem! Quas minima
            deserunt voluptas eius. Obcaecati est doloremque nostrum tempore, repellat facilis, quam fuga incidunt nobis
            recusandae fugiat sit iure. Obcaecati esse voluptatem veniam at nam cupiditate quisquam qui velit aspernatur
            itaque consequatur tempora totam doloribus, excepturi iure magnam nobis accusantium consectetur enim
            explicabo rem! Non numquam omnis aspernatur, consequuntur nihil quisquam sunt dolorum architecto voluptates
            eos delectus cum, illum alias itaque pariatur magnam facilis odit in maxime ipsum. Laborum, dolorum cum! Et
            aspernatur illo minima voluptate nobis ipsum expedita iusto debitis hic? Aliquid cum explicabo amet ab alias
            adipisci minus. Sapiente at id odit alias quod veritatis quis rerum quasi voluptatibus, optio hic tenetur
            ullam ut tempora a? Dolorem excepturi consequuntur voluptas, exercitationem facilis et nihil eos temporibus
            error maiores similique? Consequuntur, voluptates. Enim commodi eligendi aperiam sed. Enim, esse quam ex
            officia maxime cumque ut mollitia sint vel. Dolores enim doloremque neque porro, expedita doloribus
            laboriosam tempora veniam accusantium blanditiis animi eum, obcaecati dolor recusandae pariatur iure magni
            incidunt. Neque, beatae. A quidem voluptatibus earum est. Deserunt, saepe doloribus? Aperiam non ut
            provident, officia eum facilis sapiente, saepe atque temporibus unde expedita rerum aliquam modi nulla
            perferendis quibusdam at minus pariatur eos, quam quasi inventore reprehenderit. Libero, autem suscipit!
            Quia facere voluptatum dolorum excepturi reiciendis esse doloremque, harum enim vero ducimus minima
            doloribus numquam molestias blanditiis omnis animi quibusdam magnam culpa quasi sunt praesentium! Est harum
            esse consequatur laudantium facere nulla error, aspernatur nisi amet ad dolorum similique sunt reiciendis,
            vitae nemo consequuntur animi alias! Laudantium autem, placeat fugit blanditiis dolorum id inventore dolorem
            aspernatur accusamus, error eligendi ad rem consequuntur, magnam repellendus tempore voluptates.
            Consequuntur eius, praesentium perspiciatis, et pariatur totam soluta sint accusamus maxime debitis deserunt
            ratione esse quidem. Dicta, doloribus? Eius corrupti odit magnam quis sit iusto maxime iste doloribus
            suscipit aliquid fugiat, neque rem fuga. Dolorem dolor maxime inventore deserunt eaque molestiae vitae
            delectus nisi voluptate? Saepe, voluptatum maiores voluptatem et suscipit, esse explicabo voluptate officia
            impedit, inventore expedita reiciendis? Repellendus minima natus dolorem assumenda ipsa eligendi, hic
            cumque, nemo placeat rerum illum repellat fuga perferendis debitis quibusdam saepe, sunt blanditiis.
            Mollitia cupiditate earum ab aperiam totam cum dolor quia ea, aspernatur repellendus consequuntur dolore
            tenetur, non quaerat amet atque sunt ipsam impedit quasi! Cupiditate unde dignissimos odit necessitatibus,
            optio dolores, a molestiae sequi repellendus corrupti voluptatem obcaecati totam impedit sit voluptatum
            distinctio repudiandae autem illum animi est eligendi accusamus? Non ex quibusdam, ad necessitatibus impedit
            provident exercitationem beatae sunt incidunt corrupti dignissimos culpa adipisci error asperiores
            temporibus numquam doloribus ab? Architecto, possimus? Cupiditate reprehenderit ex, qui consectetur numquam
            quo accusamus soluta fugiat deleniti doloribus incidunt debitis alias libero ratione sapiente! Eveniet earum
            suscipit rem deserunt aliquid nobis nesciunt reiciendis accusamus, nulla sint odit quod ut, laboriosam
            inventore, placeat libero odio officiis magnam. Officia nulla veniam animi cupiditate modi earum quasi, enim
            ut error, voluptatem, itaque eligendi dignissimos rem sit repellendus. Ut pariatur nesciunt maiores
            blanditiis rerum eos cupiditate impedit tempore excepturi modi praesentium, iusto alias quibusdam mollitia
            accusamus temporibus perspiciatis? Exercitationem ab, quo id et at voluptatibus itaque nulla dolores vero
            rerum veniam a enim dolorum ex provident repudiandae vitae! Nulla illum repudiandae reprehenderit unde
            totam, sit quae eos expedita hic. Atque nisi eum placeat maiores ad alias aut velit id harum quod cum odit
            qui deleniti sit at, nesciunt quasi cupiditate assumenda. Veritatis commodi, similique minima velit nostrum
            ab? Eius dolor fuga, quidem velit corporis cumque cum maxime perspiciatis omnis ut atque dolorum illum iste
            nesciunt nostrum sapiente illo odio ipsum soluta, ipsam nobis autem quis repudiandae! Animi molestias
            consequuntur aliquid! Dolores omnis illo amet delectus dolorum ut, ducimus excepturi officiis distinctio
            impedit, ad doloribus blanditiis molestias sint. Mollitia nulla cum ex ipsum, esse fugiat itaque ipsa maxime
            quasi laudantium aliquam dolor! Fugit fugiat aut asperiores architecto, repellat odit reprehenderit
            molestias laborum impedit beatae nobis, voluptatem animi ipsam cum! Totam accusantium animi id beatae magnam
            voluptatem dolores doloribus aut incidunt nemo commodi, quibusdam adipisci dolorem reprehenderit alias ab
            quidem nobis repellat doloremque. Repudiandae molestiae soluta, omnis nemo consequuntur voluptates fugit
            quae corrupti illum recusandae maiores ducimus alias vel cumque nesciunt officia neque reiciendis sunt quas.
            Dolore rerum dolor minima, optio sed quae amet aperiam nobis perferendis libero dicta laboriosam ducimus
            unde commodi qui ab quaerat natus nesciunt porro quasi. Dicta magni aut vitae animi quibusdam dolorem
            ducimus deleniti labore ratione sapiente. Repellendus, nisi molestiae, quidem itaque ducimus beatae
            blanditiis laboriosam deserunt dignissimos fuga cumque quasi delectus, et harum. Ipsa, vitae necessitatibus
            ab consectetur voluptates excepturi aperiam id, facilis atque quod maiores. Error qui consequatur est
            officia magni provident sequi rerum maxime sunt similique neque nesciunt unde modi facere obcaecati dolorem
            consequuntur assumenda vero aut voluptates ipsum molestiae a, et eos. Doloribus veritatis nemo amet
            distinctio odio perferendis, vero, illum minus deleniti nisi impedit. Doloremque minus dicta obcaecati unde
            in, saepe earum repellendus cupiditate quasi et sapiente nihil vel officia voluptate nam deserunt iure
            fugiat, qui, dolore veniam perferendis repellat mollitia! Dolorum sapiente aliquam pariatur odio voluptas
            alias assumenda mollitia deserunt rerum doloribus, modi beatae voluptatum magnam? Rerum sequi cum architecto
            omnis accusamus quasi expedita obcaecati itaque, voluptatibus autem ipsam distinctio modi tempora non illo
            unde in repellendus corporis atque vero magnam. Alias, corrupti ad. Adipisci officia minima suscipit aut
            quis voluptatibus dicta aliquid voluptatum excepturi repellendus neque dignissimos modi, ex accusamus autem
            nulla omnis? Exercitationem quibusdam, nulla, doloribus quam iure id numquam odio est dolorum voluptas enim.
            Nobis, fugit minus aperiam tenetur eos cupiditate necessitatibus ad corrupti distinctio. Eum assumenda,
            fugit ratione eaque enim nostrum ipsum, voluptas, fugiat iusto veniam corporis explicabo nemo at consequatur
            magnam nulla. Nam consequuntur quis repudiandae consectetur fugiat nemo voluptatem soluta, repellendus dicta
            mollitia quisquam rerum dolorem tempora nesciunt dolore provident. Consectetur ipsum accusamus repudiandae
            recusandae dolorum, amet rem suscipit consequuntur facere dolor corrupti fugiat est numquam vel. Sint qui
            tempora ipsa deserunt fugit nesciunt vero incidunt, molestiae nemo eos? Deserunt adipisci sunt quos
            asperiores delectus pariatur minus voluptate distinctio ullam ipsam obcaecati id illo, exercitationem
            mollitia, animi eum. Nobis totam in, consequuntur ullam harum hic praesentium pariatur corrupti ipsum
            consequatur maiores, similique dicta cumque! Dolorem ea excepturi quibusdam libero fuga veniam sint sapiente
            iste quisquam. Aspernatur nobis maiores amet suscipit possimus, ab velit quae voluptates quia molestias
            earum deleniti officia optio aliquam, dolor laudantium. Corrupti, omnis ad. Ipsum, perspiciatis! Officiis ad
            sapiente dolores nesciunt mollitia reprehenderit magnam iste nisi, eius similique officia ea? Et dicta dolor
            laudantium sequi quos eum error.</p>
    </div>

I know, I know a lot of text over here right?. But yeah that's how it's easy to explain this concept.😉😉

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  position: fixed;
  top: 100px;
  left: 100px;
}

Result

Sticky

position: 'sticky' is used to stick your element with respect to the viewport. It's switches between relative & fixed or we can say it's a combination of both when scrolling the page. This one is mostly used for modern world navbar, app bar, or bottom panel.

Example

The HTML code will be the same as the fixed position only change we need to do is in CSS.

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  position: sticky;
  top: 0px;
  width: 100%;
}

Result

I hope I might have helped you to gain some knowledge.

Thankyou

Also, Check out my article on CSS Selector