0
0
0
Mastering CSS Positioning: A Comprehensive Guide to Layout image
HTMLCSS
createor-profile-picture
Spurgeon Gnan Prakash Tara
admin

Dec 27, 2024

Mastering CSS Positioning: A Comprehensive Guide to Layout and Element Placement

CSS For EveryOne
1.Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced
2.Introducing CSS - What is CSS?
3.How to ADD (or) CONNECT our CSS with HTML
4.Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers
5.Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers
11.Learn CSS Fonts and visualize your website text like a PRO
12.Everything You need to know about Pseudo Classes in CSS
13.Learn CSS display property and Understand the document flow of elements in HTML
14.Mastering CSS Positioning: A Comprehensive Guide to Layout and Element Placement
15.Mastering CSS Overflow: Understanding the Hidden, Scroll, and Auto Magic!

Mastering CSS Positioning: A Comprehensive Guide to Layout and Element Placement

Mastering CSS Positioning: A Comprehensive Guide to Layout and Element Placement

Mastering CSS Positioning: A Comprehensive Guide to Layout and Element Placement

CSS

CSS for Everyone

Description

Welcome to WebDevPlusPlus!

Web development can sometimes feel like a maze, especially when it comes to placing elements exactly where you want them on a webpage. But don’t worry we’re here to simplify things for you!

In this blog post, we’ll explore one of the core concepts of modern web design: CSS positioning. If you’ve ever been confused about how to align elements or create the perfect layout, this guide is for you.

We’ll cover everything you need to know about the different types of positioning in CSS, step by step. So, let’s dive in and master the art of positioning without further delay!

Topics Covered in This Blog Post

What is Positioning in CSS?

CSS positioning is a crucial concept in web development that allows developers to control the layout and placement of HTML elements on a webpage. With CSS positioning, you can precisely position elements in relation to their parent container, other elements on the page, or even the browser window.

Types of Positioning

There are 5 kinds of positioning that is available for us in CSS. they are:

  1. Static Positioning
  2. Relative Positioning
  3. Absolute Positioning
  4. Fixed Positioning
  5. Sticky Positioning.

Before diving deep into positioning in CSS, Let's have a look at how our starter files look like.

Starter Code and its file structure

In your machine create a folder named positioning. Within that folder create the following two files.

  1. Create an empty CSS file named styles.css
  2. Create an HTML file named index.html and paste the below code in this file.
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="heading">Posistioning in CSS</h1>

      <div class="navigation">
        <h2>Navigation</h2>
      </div>
      <div class="box"></div>
      <div class="description">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
      </div>
    </div>
  </body>
</html>

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81

Now add the below starter css code in your styles.css file.

css
.container {
  height: 75vh;
  background-color: teal;
  color: white;
}

.heading {
  text-align: center;
}

.navigation {
  height: 40px;
  background-color: #35a29f;
  text-align: center;
}

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

.description p {
  padding: 0.5rem;
  background-color: #0b666a;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26

Now save the files and open it in your favourite browser. I recommend using google chrome.

CSS Positioning - Starter Code Preview

Our HTML file includes a div element with the class name .container. Inside this .container, we have elements such as .heading, .navigation, .box, and a few paragraphs. The HTML and CSS files are already linked, and the provided styling is quite basic.

If you're unfamiliar with any of the HTML tags used, you can explore them on W3 Schools or MDN Docs. Similarly, if you're having trouble understanding the starter CSS code, check out our previous posts in this CSS for Everyone series, where we've covered these topics in detail.

Now that we’ve covered the folder structure and files, let’s dive into the core topic: CSS Positioning. We'll begin with Static Positioning.

1. Static Positioning

This is the default positioning for all HTML elements. This default positioning is how the elements get positioned and layed out in our web page. By default All the elements in our page will positioned statically one element after another line by line by following their display property. Until unless we explicitely change the position from static to any other positioning type.

2. Relative Positioning

When an element is positioned relatively, it is still in the normal flow of the document, but you can move it from its original position using the top, right, bottom, or left properties. The element's space remains reserved in the normal flow, and nearby elements are unaffected by its relative positioning. Let's try relative positioning now.

In Our HTML, We have a div element with class ".box" after the .navigation. Lets position that element in relative. In order to change it's default position, lets give a left of 40px and top of 40px as shown below.

css
/* ...Other Styles */

.box {
  width: 100px;
  height: 100px;
  background-color: #071952;
  /* Add your Styles here */
  position: relative;
  left: 40px;
  top: 40px;
}

/* ...Other Styles */

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13

Now save the file and reload the browser.

CSS Positioning - Position Relative

As you can see, The .box has moved 40px from top and 40px from left from where it should have been positioned. You can try playing with bottom and left properties as well. The important thing to observe here is, if we give left, right, top, bottom to a relatively positioned element. It will be moved from where it should have been previously without relative property.

3. Absolute Positioning

If we position an element as absolute, That element will be removed out from the document flow. And we can position it using left, right, bottom, top properties. By default it will be positioned relative to the window or screen of our browser. But, If we position any of its parent as relative, It will be positioned relative to its parent. If you didn't understand what i said earlier. Don't worry, You will understand once you tried it with an example.

Now, Let's position our element with class name .box as absolute by commenting previous position: relative code as shown below.

css
/* ...Other Styles */

.box {
  width: 100px;
  height: 100px;
  background-color: #071952;
  /* position: relative;
  left: 40px;
  top: 40px; */
  /* Add your Styles here */
  position: absolute;
  bottom: 0;
  left: 8px;
}

/* ...Other Styles */

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16

Now save the file and reload the browser.

CSS Positioning - Position absolute

As you can see, the .box has been removed from the document flow. And the upcoming next adjecent elements have been moved forward in the document flow. Now In the above case, the .box is placed relative to the screen (or) window. That is why it has been moved down to the bottom: 0px of the screen (or) window. Because it's parent .container has not been positioned relatively. If we add "position: relative" to the .container(parent of .box), the .box will be positioned relative to its parent. i.e., its parent(.container) has a hieght of 75vh. So it will be positioned at 0pixels bottom of the parent(at 75vh). Lets achieve that now.

In our CSS file lets position the .container as a relatively positioned element and see how the .box will postioned relative to its parent. Add the below styles to .conatiner. and lets also comment the background color given to paragraphs. to visualise it better. and give it a color black

css
.container {
  height: 75vh;
  background-color: teal;
  position: relative;
  color: white;
}

/* ...Other Styles */

.box {
  width: 100px;
  height: 100px;
  background-color: #071952;
  /* position: relative;
  left: 40px;
  top: 40px; */
  /* Add your Styles here */
  position: absolute;
  bottom: 0;
  left: 8px;
}

.description p {
  padding: 0.5rem;
  color: black;
  /* background-color: #0b666a; */
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27

Now save the file and reload the browser.

CSS Positioning - Position absolutely relative to its parent

As you can see, now the .box has positioned relative to its parent and it has been moved bottom 0px to the height of its parent(75vh) instaed of the window.

4. Fixed Positioning

Positioning Fixed is also similar to Absolute, but with a small change. If an element is positioned as fixed element, It will also be removed out from the document flow and also positioned fixed to the screen no matter what we scrolled down to the bottom of our web page. It will be fixed to the the same position of our screen. Let's see that in action.

Add the below styles to the box to make it fixed positioned element. And also comment the absolute code.

css
/* ...Other Styles */

.box {
  width: 100px;
  height: 100px;
  background-color: #071952;
  /* position: relative;
  left: 40px;
  top: 40px; */
  /* position: absolute;
  bottom: 0;
  left: 8px; */
  /* Add your Styles here */
  position: fixed;
  left: 8px;
  bottom: 0;
}

/* ...Other Styles */

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19

Now, Save the file and reload the browser and scroll down to the bottom.

CSS Positioning - Position fixed

As you can see, even though i scrolled down, The .box is positioned at the same place no matter what the content in the web page moves.

5. Sticky Positioning

If We position the element as a sticky element, it will be sticked to the screen at the position we speciefied through(left, right, top, bottom) when we scroll down until its parent has been scrolled up completely. Let's see that in action.

In your CSS file add the below styles to the element with classname "navigation" and make it sticky.

css
/* ...Other Styles */

.navigation {
  height: 40px;
  background-color: #35a29f;
  text-align: center;
  position: sticky;
  top: 0;
  left: 0;
}

/* ...Other Styles */

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12

Now save the file and reload the browser and scroll down and see how sticky works.

CSS Positioning - position sticky

As you can see, as we scroll through, the Nav bar is sticking at top: 0, left: 0. One thing to observe is, If you scroll through, If the parent of .navbar cross over the viewport(i.e., Screen) the sticky navbar also getting moved over the viewport. In our app, I gave height to my .container for demonstration purpose. So lets remove that.

In your CSS file Comment the below styles.

css
.container {
  /* Comment the below height */
  /* height: 75vh; */
  background-color: teal;
  position: relative;
  color: white;
}

/* ...Other Styles */

1 
2 
3 
4 
5 
6 
7 
8 
9

Now, Save the file and reload the browser.

CSS Positioning - position Sticky Demo

As you can see, now Our navbar stiking at position "top: 0 and left: 0" untill we scroll through end of the page.

Z-Index

As we keep on positioning elements as absolute or relative or fixed, etc., the elements of our web page will start stacking on top of each other. So, If multiple elements stacked on top of each other, we need a way to rank the order of the elements which should come above one another. For this purpose, In CSS we have something called z-index.

By default, all the elements in our web page will have "z-index: 0". So If you want to bring an element backwards give it a number lesser than the element which we wanna display on top.

For Example, In our app, the ..box has been removed from the document flow. And it is blocking the paragraphs and the paragraphs are not visible to the user. In this case, Both the paragraphs and .box has "z-index: 0". So if we give "z-index: -1" to the .box, then it will be positioned below our paragraphs whose z-index is greater(z-index: 0) than .box(z-index: -1).

Lets practice that now, In your CSS file, add the below styles to the .box.

css
/* ...Other Styles */

.box {
  width: 100px;
  height: 100px;
  background-color: #071952;
  /* position: relative;
  left: 40px;
  top: 40px; */
  /* position: absolute;
  bottom: 0;
  left: 8px; */
  position: fixed;
  left: 8px;
  bottom: 0;
  /* Add your Styles here */
  z-index: -1;
}

/* ...Other Styles */

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20

Now save the file and reload the browser.

CSS Positioning - z-index

As you can see, the .box was sent backwards in the stack. This process is known as stacking context.

Final Code

HTML:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="heading">Posistioning in CSS</h1>

      <div class="navigation">
        <h2>Navigation</h2>
      </div>
      <div class="box"></div>
      <div class="description">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sapiente
          quas numquam veritatis molestiae culpa, dignissimos quaerat ea alias!
          Natus blanditiis sunt deleniti, odit ipsa temporibus laudantium neque
          obcaecati excepturi.
        </p>
      </div>
    </div>
  </body>
</html>

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81

CSS:

css
.container {
  /* height: 75vh; */
  background-color: teal;
  position: relative;
  color: white;
}

.heading {
  text-align: center;
}

.navigation {
  height: 40px;
  background-color: #35a29f;
  text-align: center;
  position: sticky;
  top: 0;
  left: 0;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #071952;
  /* position: relative;
  left: 40px;
  top: 40px; */
  /* position: absolute;
  bottom: 0;
  left: 8px; */
  /* Add your Styles here */
  position: fixed;
  left: 8px;
  bottom: 0;
  z-index: -1;
}

.description p {
  padding: 0.5rem;
  color: black;
  /* background-color: #0b666a; */
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42

Conclusion

In this blog post, we have learned how to position our elemenets in CSS. We have learned Static, Relative, Absolute, Fixed and Sticky positionings. And also we have learned how to use z-index in CSS. Use these positionings according to your requirements. Use relative and absolute most of the time. When you wanna place a button like "goToTop" like in webdevparadise post page, use fixed positioning. Use sticky to only the navbars in your webpage.

That's it for this post guys. Please give your valuable feed back so that we can improve. If you liked the post, share it with your friends and family. Good Bye, Peace!!.

Please signin to view resources

Comments

No Comments Found

Follow Us:

Related Posts

View All
Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

Welcome, Learn essential CSS concepts and stay up-to-date with the latest trends and techniques in web design. Join us to enhance your CSS skills today.

Read more
Introducing CSS - What is CSS?

Introducing CSS - What is CSS?

Introduction to CSS. What is CSS and How to use it to design your web layouts and components to become a better frontend developer.

Read more
How to ADD (or) CONNECT our CSS with HTML

How to ADD (or) CONNECT our CSS with HTML

Discover how to connect CSS with HTML using inline, internal, and external stylesheets. This beginner-friendly guide covers methods and examples to style in css

Read more
Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Guide for Targeting HTML Elements using HTML Element Selector, ID Selector, Class Selector , Attribute Selector, Universal Selector

Read more
Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

CSS Combinators: Selectors, Descendant Combinations, Child Combinations, Sibling Combinations, and More

Read more