CSS Display and CSS Position

CSS Display and CSS Position

CSSHTML

Tanveer Sayem / 2020-11-21

5 min read

When learning web development for the first time. CSS layout properties always seem daunting. In this article, I will try to explain both of these CSS properties in simple terms.

TLDR: check out this video instead - CSS3 Full Tutorial part 3 -CSS Display & CSS Position

Let's tackle Display first.

What Is the Display Property?

The display property specifies the display behavior (the type of rendering box) of an element. In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet.

It simply means that every HTML element has a display value attached with by default. For example- <div>, <h1>-<h6>, <p>,<form>, <header>, <footer> and <section> has a display value of 'block'. On the other hand <span> and <a> has a display value of 'inline' and <img> has a display value of 'inline-block'

In this article, we will discuss 4 types of display value: 1. Block, 2. Inline 3. Inline-Block and 4. None.

1. Block - The element generates a block element box, generating line breaks both before and after the element when in the normal flow. In simple terms, a block-level element will take maximum space that is available and also will form in its own line. Here is an example:

<head>
 <style>
 li {
   display: block;
   background: lightgray;
 }
 </style>
</head>
<body>
 <p>Display a list of links as a Verticle menu:</p>
 <ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
 </ul>
</body>

<li> has a default display value of 'block', so it displays a list of links as a verticle menu because each list item is taking its own line and taking the whole width of the available space (shown by the background color of light gray).

2. Inline - The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.

Now if we simply override the display value to 'inline' in our stylesheet above, here is the result.

<style>
li {
  display: inline;
  background: lightgray;
}
</style>

'inline' behaves exactly the opposite of 'block'. Inline takes the minimum space (shown by the background color of light gray) that is required by the content and will not form in its own line.

3. Inline-block - For the 'inline-block' element we can specify the dimensions of the elements such as width and height. 'inline-block' behave just like an 'inline' element with the benefit of specifying the width and height. A great example of this is an <img> element. We can not specify the dimensions with an 'inline' element.

4. None - Turns off the display of an element so that it has no effect on the layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.

To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.

Now let's talk about the position property.

What is CSS Position?

The position CSS property sets how an element is positioned in a document. There are five different position values:

1. Static

2. Relative

3. Absolute

4. Fixed

5. Sticky

The top, right, bottom, and left properties determine the final location of positioned elements.

1. Static - The element is positioned according to the normal flow of the document. The top, right, bottom, left and z-index properties have no effect. This is the default value.

you can check the position of your element through the browser dev tools, just go to the Styles panel and choose computed and search for the position.

2. Relative - The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if the position were static.

in Simple terms, it is just like position static with the benefit of using top, right, bottom, and left to specifically position it, relative to its static default position. Here is an example:

.box-1 {
  position: relative;
  left: 10px; 
  background: orange;
}

In the above example, I have called position relative in my stylesheet and also called left to 10px. Which results in 'Box one' to be moved to the right 10px.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

3. Absolute - The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

in simple terms, position absolute takes the element out of the document flow completely and every other element behaves like the absolute element never existed. Here is an example:


.box-1 { 
  position: absolute;
  top: 0;
  background: orange;
}

Position absolute took the 'Box one' out of the flow and since we defined it to be top to 0, it went to the top out of the container box. If we wanted 'Box one' to be within the container div then we just have to call position relative to the container div.

4. Fixed - An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. Position fixed also takes the element out of the flow just like position absolute.

5. Sticky - An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed).

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

If you click on my affiliates links and shop(anything, not just books), I am going to receive a tiny commission. AND… Most of the time, you will receive an offer. Win/Win! The products that I have are the ones I believe in.

Subscribe to the newsletter

Get emails from me about web development, tech, and early access to new articles.