Positioning-ஐப் பயன்படுத்தி வலைத்தளப் பக்கங்களில் ஒருசில வார்த்தைகளை ஒரு குறிப்பிட்ட இடத்தில் வெளிப்படுமாறு செய்யலாம். Left, Right, Top, Bottom எனும் நான்கு வகையான பண்புகள் இதற்காகப் பயன்படுகின்றன. இங்கு Fixed, Static, Relative எனும் 3 வகையான positioning-ஐப் பற்றி பார்க்கலாம்.
வலைத்தளப் பக்கங்களில் இயல்பான விதத்தில் வரிகள் வெளிப்படுவதே static positioning ஆகும். இது மேற்கூறிய 4 பண்புகளாலும் பாதிக்கப்படாது. இது பின்வருமாறு.
[code]
<html>
<head>
<style>
p.a {position:static; top:5px; right:30px}
</style>
</head>
<body>
<p class=a> Dont Giveup! Keep on Trying! </p>
<p class=b>Even though it seems to be impossible, It will happen in your life one day. </p>
<p class=c>All the very best friends! Wait to see the miracle in your life!!!!!! </p>
</body>
</html>
[/code]
இங்கு top:5px; right:30px; என்று கொடுத்தாலும் வரிகள் இயல்பான விதத்தில் வெளிப்படுவதை கவனிக்கவும்.
Position : fixed என்று கொடுக்கும் போது நாம் கொடுத்திருக்கும் top:5px; right:30px; எனும் மதிப்புக்கு ஏற்ப வலப்புறத்திலும், மேற்புறத்திலும் இடம்விட்டு அந்த வரி வெளிப்படுவதை கவனிக்கவும். இது பின்வருமாறு.
இவ்விதத்தில் வார்த்தைகள் வெளிப்படும்போது அவை browser-ல் நிலையான ஒரு இடத்தைப் பெற்று விடுவதால், இதன்மீது மற்ற வரிகள் overwrite செய்துவிடும்.
[code]
<html>
<head>
<style>
p.a {position:fixed; top:5px; right:30px}
</style>
</head>
<body>
<p class=a> Dont Giveup! Keep on Trying! </p>
<p class=b>Even though it seems to be impossible, It will happen in your life one day. </p>
<p class=c>All the very best friends! Wait to see the miracle in your life!!!!!! </p>
</body>
</html>
[/code]
Position : relative என்று அமைக்கும்போது இயல்பான நிலையிலிருந்து நாம் கொடுக்கும் மதிப்புக்கு ஏற்ப வரிகளை தள்ளி அமைக்கும். பின்வரும் உதாரணத்தில், இயல்பான
வலப்புறத்திலிருந்து 30px பின்னோக்கி தள்ளப்பட்டு வரிகள் வெளிப்படுவதை கவனிக்கவும்.
[code]
<html>
<head>
<style>
p.a {position:relative; top:5px; right:30px}
</style>
</head>
<body>
<p class=a> Dont Giveup! Keep on Trying! </p>
<p class=b>Even though it seems to be impossible, It will happen in your life one day. </p>
<p class=c>All the very best friends! Wait to see the miracle in your life!!!!!! </p>
</body>
</html>
[/code]
