CSS Properties: How to set position an heading-2 element

Last update on February 24 2024 12:26:20 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to set position an heading-2 element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
h2 { /* Styles all h2 elements */
  position: absolute; /* Sets the positioning method to absolute */
  left: 100px; /* Positions the element 100 pixels from the left edge of its containing element */
  top: 150px; /* Positions the element 150 pixels from the top edge of its containing element */
}
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p>w3resource Tutorial</p><!-- Displays a paragraph with text content -->
<h2>This is a heading with an absolute position</h2><!-- Displays an h2 heading with absolute positioning -->

<p>With absolute positioning, an element can be placed anywhere on a page.</p><!-- Displays a paragraph with text content -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

The HTML document demonstrates how to position an <h2> element using CSS.
CSS comments are added to explain each section of the code.
The CSS selector h2 targets all <h2> elements in the document.
The position: absolute; property-value pair sets the positioning method of the <h2> element to absolute, allowing precise placement on the page.
The left: 100px; property specifies the distance between the left edge of the <h2> element and the left edge of its containing element (viewport or positioned ancestor) as 100 pixels.
The top: 150px; property specifies the distance between the top edge of the <h2> element and the top edge of its containing element as 150 pixels.

Live Demo :

See the Pen html css common editor by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page