CodeNewbie Community

Vishnubhotla Bharadwaj
Vishnubhotla Bharadwaj

Posted on • Originally published at bharadwaj.hashnode.dev on

Display and Position properties of CSS

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;

Enter fullscreen mode Exit fullscreen mode

None: Get rid of the element as it is not written in the code itself.

display: none;

Enter fullscreen mode Exit fullscreen mode

-> 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>

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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

You can connect with me on Twitter and Linkedin

Discussion (0)