কম্পিউটার টিউটোরিয়াল

CSS-এ Fixed Positioning


position: fixed; সেট করা এলিমেন্ট পেজ স্ক্রোল করলেও একই জায়গায় থাকে।

উদাহরণ

<!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;
}
div.demo3 {
  position: fixed;
  bottom: 0;
  right: 20px;
  width: 500px;
  border: 3px solid orange;
  color: blue;
}
</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 class="demo3"> position: fixed; </div> </div>
<p>This is another demo text.</p>
</body>
</html>

আউটপুট

CSS-এ Fixed Positioning


  1. CSS-এ Background Attachment

  2. CSS-এ Fixed Positioning

  3. CSS দিয়ে অ্যাবসোলিউট পজিশনিং

  4. CSS এলিমেন্ট পজিশনিং