Let’s Clear Up the Most Confusing Thing in CSS
Simplifying the display and position properties in CSS
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
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.
The default code with no position properties
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.
position property in CSS determines how an element is positioned on the webpage relative to other elements. The
z-index values give the position to an element with a
position property. This property can have the following values.
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
z-index; these are simply ignored even if you try to assign them.
All the elements are static by default so the change will not take effect
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 property allows you to add
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.
As you can see in the image,
4em away from the top and
3em away from the left relative to its static position. All the other
divs are not affected.
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> 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.
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.
added position:relative; to all <div>, and position:absolute; to <div2>
In the above gif,
<div2> has an absolute position with
z-index: 9; and
bottom:50px;. Initially, the
position: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 property behaves both as
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.
In the above code, all the
<div> elements have
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 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.
display property has many possible values, so we will discuss the most common ones.
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.
<a> elements are
inline by default.
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.
<header> elements are
display:block by default.
inline-block has benefits of both
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.
inline-block by default.
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.
Hi! I am Shubh, a Programmer, Blogger, and a YouTuber. I believe in decentralisation, love tech, and invest in crypto. I create content related to these topics and programming and bogging.