Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Let's Coding Example</title> </head> <style> // first example .position-example { position: relative; width: 400px; height: 400px; background-color: lightblue; border: 1px solid black; } .position-example::before { content: "Top: 10px; Left: 0;"; position: absolute; top: 10px; left: 0; background-color: #7FFFD4; padding: 5px; } .position-example::after { content: "Bottom: 10px; Right: 8px;"; position: absolute; bottom: 10px; right: 8px; background-color: #7FFFD4; padding: 5px; } // second example .position-example-2 { position: relative; width: 400px; height: 400px; background-color: green; border: 1px solid black; } .div1 { position: absolute; top: 0; right: 0; background-color: yellow; padding: 5px; } .div2 { position: absolute; bottom: 0; left: 0; background-color: yellow; padding: 5px; } </style> <body> <div class="position-example"> </div> <div class="position-example-2"> <div class="div1"> Positional Alignment Example Top </div> <div class="div2"> Positional Alignment Example Bottom </div> </div> </body> </html>
console output