Creative IT Blog Just another WordPress site
Related Articles
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 এর কাজ দেখতে পাবেন।
