<< Previous Next >>

CSS Positioning

CSS position అనే property ద్వారా ఒక element (అనగా images ,text లాంటివి ఏవైనా కావచ్చు) ను web page పై ఏ భాగంలోనయినా అనగా image పై text లేదా ఒక image పై మరొక image ఉండేలా ఇలా ఏ విధంగా నయినా డిస్ప్లే చేయవచ్చును. ఇందుకుగాను ఈ property (i) Static Positioning (ii) Fixed Positioning (iii) Relative Positioning మరియు (iv) Absolute Positioning అని నాలుగు (4) పద్దతులను కలిగి ఉంటుంది. ఇందులో దేన్ని ఉపయోగించాలన్నా ముందుగా "css position" property ని set చెయ్యాల్సి ఉంటుంది.

Static Positioning

సహజంగానే HTML elements (మూలకాలు) అనేవి static position ను కలిగి ఉంటాయి. Static position లో నిర్దేశించబడిన elements పై top, bottom, left, మరియు right అనే properties లను వాడటం వల్ల ఎలాంటి ప్రభావమూ ఉండదు.

Fixed Positioning

Fixed position గా నిర్దేశింపబడిన element మనం వాడే browser కు అనుగుణంగా "fix" అయ్యి ఉంటుంది. అనగా browser window ను move చేసినాకుడా (పైకి గానీ క్రిందకు గానీ) element మాత్రం అదే స్థానంలో fix చేసినట్టుగా ఉంటుంది. ఈ element మిగతా elements తో ఎలాంటి సంబంధమూ లేనట్టుగా ప్రవర్తిస్తుంది.ఇంకోలా చెప్పాలంటే ఈ fixed position element మన screen కి fix చేసినట్టుగా ప్రవర్తిస్తుంది.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.txt_fixed { position: fixed; top: 3px;
left: 3px; color: red;}
</style>
</head>
<body>
<h4 class="txt_fixed">I am fixed</h4>
<p>A fixed element is positioned relative
to the viewport, which means it always
stays in the same place even if the
page is scrolled. </p>
</body>
</html>

A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

Scroll చేసి చూడుము.
గమనిక : Internet Explorer 7 ,8 browser లలో '!DOCTYPE' అని వ్రాయకపోతె Position fixed అనే property యొక్క ప్రభావాన్ని చూడలేము.

Relative Positioning

Position relatively అనే property ద్వారా element ని move చేయడమే కాకుండా మరొక element పై పడేవిధంగా (overlap) చేయవచ్చును. అయితే element కు సహజంగా ఉన్న space మాత్రం overlap చేసినంత మాత్రాన ఏమాత్రం మారదు.

క్లిక్ చేయండి
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h3{position: relative;top: -30px;}
</style>
</head>
<body>
<h2>heading 1</h2>
<h3>heading 2</h3>
<h4>heading 3</h4>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

heading 1

heading 2

heading 3

మొదటి heading ను తొలగించినాకుడా రెండవ ,మూడవ heading ల నడుమ గల ఖాళీ ప్రదేశంలో మార్పు లేదని గమనించండి.

Absolute Positioning

Absolute position గా నిర్దేశింపబడిన element మనం వాడే browser పై సులభంగా ఎక్కడైనా fix చేసే విధంగా ఉంటుంది. అనగా HTML document కు ఉండే normal flow తో సంబంధం లేనట్టుగా ఉంటుంది. మనం browser window ను move చేసినప్పుడు (పైకి గానీ క్రిందకు గానీ) ఈ element కూడా browser తో పాటు పైకి గానీ క్రిందకు గానీ move అవుతుంది. ఎందుకంటే ఈ element ని browser కు fix చేసాము అదే fixed position గా నిర్దేశింపబడి ఉంటే మనం browser ని move చేసినా కూడా element మాత్రం move కాకుండా అదే స్థానంలో fix చేసినట్టుగా ఉంటుంది.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.abs {position: absolute; top: 3px;
left: 3px; color: red;}
</style>
</head>
<body>
<h4 class="abs">I am absolute</h4>
<p>This tells the browser that whatever
is going to be positioned should be
removed from the normal flow of the
document and will be placed in an
exact location on the page. </p>
</body>
</html>

This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page.

Scroll చేసి చూడుము.

Overlapping Elements

Element యొక్క position అనే property ని ఉపయోగించి ఒక image పై మరొక image గాని లేదా text గాని పడేలా చేయవచ్చు. దీన్నే overlapping అంటారు. అయితే ఏది ముందు ఏది వెనుక ఉండాలి అనేదాన్ని "z-index" అనే property ని ఉపయోగించి నిర్ణయించవచ్చును.

Click చేసి చూడుము.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img{position: absolute;left: 10px;
top: 10px; z-index: -1;}
</style>
</head>
<body>
<h2>CSS Overlapping</h2>
<img src="mickey.gif" width="30"
height="40">
<p>By changing z-index value from -1 to 1,
image will be placed over the text. </p>
</body>
</html>

By changing z-index value from -1 to 1, image will be placed over the text.

తదుపరి CSS Background Property గురించి...

<< Previous Next >>

Back to Top