CSS Properties: How to set position an heading-2 element
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 |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics