எளிய தமிழில் CSS – 7 – Positioning

Positioning-ஐப் பயன்படுத்தி வலைத்தளப் பக்கங்களில் ஒருசில வார்த்தைகளை ஒரு குறிப்பிட்ட இடத்தில் வெளிப்படுமாறு செய்யலாம். Left, Right, Top, Bottom எனும் நான்கு வகையான பண்புகள் இதற்காகப் பயன்படுகின்றன. இங்கு Fixed, Static, Relative எனும் 3 வகையான positioning-ஐப் பற்றி பார்க்கலாம்.

வலைத்தளப் பக்கங்களில் இயல்பான விதத்தில் வரிகள் வெளிப்படுவதே static positioning ஆகும். இது மேற்கூறிய 4 பண்புகளாலும் பாதிக்கப்படாது. இது பின்வருமாறு.


<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>

இங்கு top:5px; right:30px; என்று கொடுத்தாலும் வரிகள் இயல்பான விதத்தில் வெளிப்படுவதை கவனிக்கவும்.

Position : fixed என்று கொடுக்கும் போது நாம் கொடுத்திருக்கும் top:5px; right:30px; எனும் மதிப்புக்கு ஏற்ப வலப்புறத்திலும், மேற்புறத்திலும் இடம்விட்டு அந்த வரி வெளிப்படுவதை கவனிக்கவும். இது பின்வருமாறு.

இவ்விதத்தில் வார்த்தைகள் வெளிப்படும்போது அவை browser-ல் நிலையான ஒரு இடத்தைப் பெற்று விடுவதால், இதன்மீது மற்ற வரிகள் overwrite செய்துவிடும்.


<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>

Position : relative என்று அமைக்கும்போது இயல்பான நிலையிலிருந்து நாம் கொடுக்கும் மதிப்புக்கு ஏற்ப வரிகளை தள்ளி அமைக்கும். பின்வரும் உதாரணத்தில், இயல்பான

வலப்புறத்திலிருந்து 30px பின்னோக்கி தள்ளப்பட்டு வரிகள் வெளிப்படுவதை கவனிக்கவும்.


<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>

Leave a Reply

%d bloggers like this: