CSS Properties: How to set the right edge of the absolute position of division element

Last update on February 24 2024 12:26:19 (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 the right edge of the absolute position of division element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
div.relative { /* Styles div elements with class "relative" */
    position: relative; /* Sets the position of the div relative to its normal position */
    width: 300px; /* Sets the width of the div */
    height: 150px; /* Sets the height of the div */
    border: 3px solid #CC63FF; /* Sets the border properties of the div */
}

div.absolute { /* Styles div elements with class "absolute" */
    position: absolute; /* Sets the position of the div relative to its first positioned (not static) ancestor element */
    right: 30px; /* Sets the distance between the right edge of the div and the right edge of its containing block */
    width: 150px; /* Sets the width of the div */
    height: 120px; /* Sets the height of the div */
    border: 3px solid #FF36CC; /* Sets the border properties of the div */
} 
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section -->
<body><!-- Begins the body of the document -->
<p>w3resource Tutorial</p><!-- Displays a paragraph with the text "w3resource Tutorial" -->
<div class="relative">This division element is relative position. <!-- Displays a div element with relative positioning -->
<div class="absolute">This division element is absolute position. It is placed 30 pixels to the left of the right edge of the containing positioned element.</div><!-- Displays a div element with absolute positioning -->
</div><!-- Ends the relative div element -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to set the right edge of an absolutely positioned division element.
CSS comments are added to explain each section of the code.
Two CSS selectors are defined:

div.relative styles div elements with the class "relative".
div.absolute styles div elements with the class "absolute".

The position property is used to specify the positioning behavior of the div elements:

position: relative; sets the position of the div relative to its normal position in the document flow.
position: absolute; positions the div relative to its first positioned (not static) ancestor element.

The right property is used to set the distance between the right edge of the absolutely positioned div and the right edge of its containing block.
Other CSS properties like width, height, and border are used to style the div elements accordingly.

Live Demo :

See the Pen right-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page