CSS Position (অবস্থান) Property - প্রিয়লেখা

CSS Position (অবস্থান) Property

sakeba
Published: September 19, 2016

Position Property   দ্বারা  html element এর অবস্থান বুঝায়। ওয়েব পেজে বিভিন্ন HTML element সমূহ কোথায় কিভাবে প্রদর্শিত হবে তা প্রকাশ করার জন্য position property  ব্যবহার করা হয়। এর সাথে top, bottom, left, and right প্রোপার্টি সমূহ ব্যবহার করে কোন HTML  element  অবস্থান নির্ধারণ করা হয়। position property চারটি value হতে পারে। এগুলো হচ্ছে,
1.পজিশন স্ট্যাটিক (position:static)
2.পজিশন ফিক্সড (position:fixed)
3.পজিশন রিলেটিভ (position:relative)
4.পজিশন এবসলিউট (position:absolute)
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title> Creative IT Institute </title>
<style>
div {
color:#eaf0f0;
background:#13afbc;
padding:10px;
border:#76935d 3px solid;
display: inline-block;
padding:10px 30px;
height: 100px;
width: 200px;
text-align: center;
font-size: 30px;
}
#static{
position:static;
left:100px;
top:70px;}
#absolute{position: absolute;
left:230px;
top:170px;}
#fixed{position: fixed;
right:10px;
bottom:50px;}
#relative{position: relative;
left:150px;
top:100px;}
p{background:#FCF;
padding:10px;
border:#F09 1px solid;}
</style>
</head>
<body >
<div id=”static”>Position static</div>
<div id=”relative”>Position relative</div>
<div id=”absolute”>Position absolute</div>
<div id=”fixed”>Position fixed</div>
</body>
</html>

উপরের code গুলো copy করে একটা html file এ paste করলে সবগুলো position property এর কাজ  দেখতে পাবেন।