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:
Live Demo:
See the Pen left-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
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