CSS provides properties to control the display and positioning of HTML elements. These properties allow you to define the layout and arrangement of elements within a web page. Let’s explore how to use CSS to manipulate the display and position of elements.

Display Property

The display property determines how an element is rendered and displayed within the document flow. It can have various values, each affecting the element’s behavior. Here are some commonly used values:

• block: The element generates a block-level box, taking up the full width available and starting a new line.
• inline: The element generates an inline-level box, flowing within the content and not starting a new line.
• inline-block: The element generates an inline-level box that behaves like a block-level box, allowing other elements to sit beside it.
• none: The element is not displayed at all, effectively removing it from the layout.

div {
  display: block;
}

span {
  display: inline;
}

Position Property

The position property determines how an element is positioned within its containing element. It can have several values, each controlling the positioning behavior. Here are some commonly used values:

• static: The element is positioned according to the normal flow of the document.
• relative: The element is positioned relative to its normal position, allowing it to be shifted using the top, right, bottom, and left properties.
• absolute: The element is positioned relative to its nearest positioned ancestor, or the document if no positioned ancestor exists.
• fixed: The element is positioned relative to the viewport and does not move when the page is scrolled.

div {
  position: static;
}

img {
  position: absolute;
  top: 50px;
  left: 50px;
}

Z-Index

The z-index property specifies the stacking order of positioned elements along the z-axis. It determines which elements appear in front of or behind others. Elements with a higher z-index value appear in front of elements with a lower value.

div {
  position: absolute;
  z-index: 2;
}

span {
  position: absolute;
  z-index: 1;
}

Conclusion

CSS display and position properties allow you to control the layout and positioning of HTML elements. By using values like block, inline, relative, absolute, and fixed, you can manipulate the display behavior and position elements relative to their normal flow. Additionally, the z-index property enables you to control the stacking order of elements along the z-axis. Experiment with different values and techniques to achieve the desired layout and positioning effects in your web pages.