RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/right-answer.php below:

Website Navigation

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

CSS Properties: How to set the right edge of the absolute position of division elementLast update on February 24 2024 12:26:58 (UTC/GMT +8 hours)

Go to Exercise page

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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4