HTML

Elements of a website can interact with and overlay on top of one another in many different ways, making CSS layout challenging to control. One way to set the placement of an element is with a combination of the position property, z-index property, and the direction properties, which apply spacing values with top, right, bottom, and left. In this tutorial, you will create a page of content with a navigation element in the header, using he relative, absolute, and fixed position values.

When styling HTML with CSS, opacity can help soften a shadow, de-emphasize non-essential content during a specific task, or fade content in or out of view. Throughout this tutorial, you will use various ways to apply opacity and extra properties to create a modal that appears with a no-JavaScript approach using the :target pseudo class and the opacity, pointer-events, and transition properties.