position: absolute দিয়ে এলিমেন্টকে নরমাল ফ্লো থেকে বের করে নিকটতম পজিশन्ड (relative, absolute, fixed, sticky) এনসেস্টারের সাপেক্ষে অবস্থান করা হয়। কোনো পজিশन्ड এনসেস্টার না থাকলে <html> (initial containing block) সাপেক্ষে থাকে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div.demo1 {
position: relative;
color: white; background-color: orange; border: 2px dashed blue;
width: 600px; height: 200px;
}
div.demo2 {
position: absolute;
color: white; background-color: orange; border: 2px dashed blue;
top: 50px; right: 0; width: 300px; height: 100px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p><p>This is demo text.</p><p>This is demo text.</p><p>This is demo text.</p>
<div class="demo1">position: relative;
<div class="demo2"> position: absolute; </div>
</div>
<p>This is another demo text.</p><p>This is demo text.</p><p>This is demo text.</p>
</body>
</html>
কী পয়েন্ট: top: 50px; right: 0; দিয়ে প্যারেন্টের (demo1) উপরের কিনারা থেকে ৫০পিক্সেল নিচে এবং ডান কিনারায় স্থাপন করা হয়েছে।
