CSS Properties: How to set the left edge of the absolute positioned of division element to the right of the left edge of its nearest positioned ancestor?

Last update on February 23 2024 13:05:02 (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 left edge of the absolute positioned of division element to the right of the left edge of its nearest positioned ancestor</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
  .w3r { /* Defines a CSS class named w3r */
  position: relative; /* Sets the positioning context of elements with class w3r to their containing block */
  width: 300px; /* Sets the width of elements with class w3r to 300 pixels */
  height: 150px; /* Sets the height of elements with class w3r to 150 pixels */
  border: 3px solid #CC63FF; /* Sets a 3-pixel solid border with color #CC63FF (purple) for elements with class w3r */
  }
.w3r1 { /* Defines a CSS class named w3r1 */
  position: absolute; /* Positions elements with class w3r1 absolutely relative to their nearest positioned ancestor */
  left: 60px; /* Aligns the left edge of elements with class w3r1 60 pixels from the left edge of their containing block */
  width: 150px; /* Sets the width of elements with class w3r1 to 150 pixels */
  height: 100px; /* Sets the height of elements with class w3r1 to 100 pixels */
  border: 3px solid #FF36CC; /* Sets a 3-pixel solid border with color #FF36CC (pink) for elements with class w3r1 */
  }
</style><!-- Ends CSS styling -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<div class="w3r">This div element position is: relative; <!-- Div element with class w3r and text content -->
<div class="w3r1">This div element position is: absolute.</div><!-- Nested div element with class w3r1 and text content -->
</div><!-- Ends the outer div element -->
</body>
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to set the left edge of an absolutely positioned div element to the right of the left edge of its nearest positioned ancestor.
CSS comments are added to explain each section of the code.
The .w3r class sets the styling for the outer div element, including its positioning context, dimensions, and border.
The .w3r1 class sets the styling for the nested div element, positioning it absolutely relative to its nearest positioned ancestor (w3r class), and specifying its dimensions and border properties.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page