We all know that display and position properties play an important role while building any website. In this blog let us know what exactly these properties do and how can we use them.
First, let's see Display properties
We have totally four display properties in CSS
- Block
- Inline
- Inline-Block
- None
Block elements: Takes the whole width of the screen on the web page.
Common block elements are:
- paragraphs(p)
- headers(h1 to h6)
- divisions(div)
- list and list items(ul, ol, li)
- forms(form)
Inline elements: Takes the width of the element and the elements are arranged sequentially.
Common inline elements are:
- images
- anchor
- span
Inline-Block elements: If you want to change the width & height of the element and also want to make the inline element as a block element or block element as an inline element then this property is used.
display: inline-block;
None: Get rid of the element as it is not written in the code itself.
display: none;
-> visibility: hidden; gets rid of the element but keeps its position(any empty space in the website)
These are the display properties of the CSS and now its time let's see Position properties:
HTML has some predefined rules, on how the element should be displayed on the webpage, even if you don't have any CSS applied. They are:
- Content is everything.
ex: Inline elements take the same space as the content. Block elements even though takes 100% width, height is based on their content.
- Order comes from the code.
ex: The order in which you have written the code, same as shown in the webpage. If you have h1 followed by p and a tags then the same is replicated in the webpage.
- Children sit on parents.
ex: If there is a div and it contains an h1, then h1 sits on the top of the div. i.e, it is more towards the viewer based on the concept called z-index.
CSS position properties:
- static
- relative
- absolute
- fixed.
Static: Go along with HTML rules and keep the flow.
HTML code for static
<body>
<div class="red">
</div>
<div class="blue">
</div>
<div class="yellow">
</div>
CSS code for static:
.red{
width: 100px;
height: 100px;
background-color: red;
}
.blue{
width: 100px;
height: 100px;
background-color: blue;
}
.yellow{
width: 100px;
height: 100px;
background-color: yellow;
}
body{
margin: 0;
}
Relative: The element will be positioned relative to how it will be positioned. Do not disturb the position of other elements.
Note: The HTML code for all the positions is the same in this code.
CSS code for relative:
.red{
height: 200px;
width: 200px;
background-color: red;
position: relative;
left: 400px;
}
.blue{
height: 200px;
width: 200px;
background-color: blue;
position: relative;
bottom: 200px;
}
.yellow{
height: 200px;
width: 200px;
background-color: yellow;
position: relative;
bottom: 400px;
left: 200px;
}
body{
margin: 0;
}
Absolute: Positions the image relative to its parent.
CSS code for absolute:
.red{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 200px;
top: 200px;
}
.blue{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 100px;
top: 100px;
}
.yellow{
width: 100px;
height: 100px;
background-color: yellow;
}
body{
margin: 0;
}
Fixed: Stays exactly where it is. Relative to the position, fixed to the body of the website.
CSS code for fixed:
.red{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
}
.blue{
width: 100px;
height: 100px;
background-color: blue;
}
.yellow{
width: 100px;
height: 100px;
background-color: yellow;
}
body{
margin: 0;
}
CodePen links for all the codes are here:
Static: https://codepen.io/bharadwaj6262/pen/rNyVgXM
Relative: https://codepen.io/bharadwaj6262/pen/eYvNBdm
Absolute: https://codepen.io/bharadwaj6262/pen/rNyVyzP
Fixed: https://codepen.io/bharadwaj6262/pen/mdWJZwo
Connect with me
Top comments (0)