I finally defeated my procrastination and sat in front of my computer to at last work on the one project I have been postponing for months: my website. I am not a web developer, but I’ve always wanted to craft my website from scratch. So I had to learn CSS.
While learning the art of making my UI look good and be more responsive, I encountered probably the most confusing thing in CSS: the display and position properties. These properties are quite useful because they make the UI elements more dynamic and responsive, so they are pretty important — but also one of the most daunting things I encountered.
To explain to you the position property, I will use the example below. The image below has five <div> blocks: The pink one has parent class and the others are div1-div4 inside of it. I have not used the position property on any of them yet.
We will discuss each property one by one. Think of the below image and code as the default. For simplicity, instead of calling the elements <div class=’div2’>, I will just refer to their class name.
This is what the below code looks like in the browser
body {
margin: 0;
}
.parent {
background-color: #f68787;
}
div {
color: white;
font-family: 'Poppins';
font-weight: bold;
padding: 2em;
}
.div1 {
background-color: #743c08;
}
.div2 {
background-color: #df760b;
}
.div3 {
background-color: #f6b61e;
}
.div4 {
background-color: #f8a978;
}
Position
Note: All the things on a website are placed relative to other elements. The navbar is usually relative to the viewport, elements inside a div are placed relative to the div, and so on.
Here is my YouTube video on the position property.
The position property in CSS determines how an element is positioned on the webpage relative to other elements. The top, right, left, bottom, and z-index values give the position to an element with a position property. This property can have the following values.
static
This is the default position for all the HTML elements. Elements with this value go with the flow of basic HTML and do not have any special privileges such as the top, bottom, right, left, or z-index; these are simply ignored even if you try to assign them.
.div1 {
background-color: #743c08;
top: 400px;
}
.div2 {
background-color: #df760b;
left: 400px;
}
.div3 {
background-color: #f6b61e;
right: 400px;
}
.div4 {
background-color: #f8a978;
bottom: 400px;
z-index: -2;
}
The above code will have no effect because all the elements are static by default. So our output will look exactly like the default image.
relative
.div1 {
background-color: #743c08;
position: relative;
top: 4em;
left: 3em;
}
The relative property allows you to add top, bottom, right, or left properties. The changes take place relative to the element as if it were static, i.e., the changes are made based on the element’s normal (static) position. Other elements are not affected and ignore the element with the relative property. You can use this property if you want to change the position of a particular element without affecting others.
div1 moves relative to its static position
As you can see in the image, <div1> is 4emaway from the top and 3em away from the left relative to its static position. All the other divs are not affected.
fixed
Elements with this property go out of the flow of the document and can display on top of everything if they have a higher z-index. This property positions the element relative to the page — a more accurate word would be viewport** **— and other elements are not affected. This is usually used to create a navbar.
.div3 {
background-color: #f6b61e;
position: fixed;
top: 300px;
left: 400px;
z-index: 999;
}
<div3> is fixed at 300px away from top and 400px away from left
As you can see, <div3> is out of its parent element and other <div> elements behave as if it never existed.
absolute
This is the same as fixed except that the element is not positioned relative to the viewport but to the nearest element with any position value other than static. In simple terms, this is exactly as same as fixed, except now it’s relative to its nearest neighbor with a position property.
div {
color: white;
font-family: 'Poppins';
font-weight: bold;
padding: 2em;
position: relative;
}
.div2 {
background-color: #df760b;
position: absolute;
bottom: 50px;
z-index: 9;
}
This gif shows the use of absolute position in CSS
In the above gif, <div2> has an absolute position with z-index: 9; and bottom:50px;. Initially, theposition:relative; part of the code in <div> is commented. When I uncomment it, <div2> is positioned 50px away from the bottom of the parent.
sticky
The sticky property behaves both as fixed and relative, and switches between them depending on the scroll value. This is one of those properties which you will have to see in action to understand. It is commonly used with large lists to keep the title on top when viewing list items.
To explain this property, I have added an unordered list in the code.
div {
color: white;
font-family: 'Poppins';
font-weight: bold;
padding: 2em;
position: sticky;
top: 0;
}
ul {
background-color: white;
color: black;
padding: 2em;
margin: 0;
}
li {
margin: 1em 0;
}
The sticky property is commonly used with lists
In the above code, all the <div> elements have position:sticky; with top:0; . This means that all the <div> will be relative initially but when they touch the top, they turn to fixed. This is why it appears that they are replacing each other but they are on top of each other.
Display
The display property specifies how the rectangular block of an element will be rendered on the screen. Every element is a rectangle on the webpage, and this has neighboring rectangles. So put simply, the display property controls the width and height of an element, whether it will be displayed or not, and if it will have neighbors.
The display property has many possible values, so we will discuss the most common ones.
inline
An element with this property can sit between other elements; they are not pushed to the next line. However, this does not allow you to set the width or height; these are simply ignored. <span> and <a> elements are inline by default.
block
An element with a block value does not allow any other element next to it. It takes the entire horizontal space it can possibly take if no width is set. This is useful when you want a heading or a div to take the entire space in a line. This is also used to give an element width and height. <p>, <div>, <header> elements are display:block by default.
inline-block
inline-block has benefits of both inline and block. With this value, you can set the width and height of an element and it stays in line with other elements. You can use this to place a div or an image between text. <img> is inline-block by default.
none
This property makes an element disappear completely from the webpage. The element does not become invisible; it is completely removed as if it never existed. This is used to hide certain elements from the mobile version of the webpage to compensate for the small screen size.
I hope that now you have a solid understanding of position and display properties in CSS.
