CSS పోసిషన్ అట్రిబ్యూట్

నిర్వచనం మరియు ఉపయోగం

position అనే విధానం సామగ్రి పొందుపరిచే రకాన్ని నిర్వచిస్తుంది.

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

另请参阅:

CSS 教程:CSS 定位

HTML DOM 参考手册:position 属性

ఉదాహరణ

హెడింగ్ హెచ్2 ఎలిమెంట్ ను లొకేట్ చేయడం:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

స్వయంచాలకంగా ప్రయత్నించండి

CSS సంకేతాలు

position: static|absolute|fixed|relative|sticky|initial|inherit;

అంశపు విలువ

విలువ వివరణ
absolute

అబ్సూల్యూట్ లొకేషన్ కలిగిన ఎలిమెంట్ను static లొకేషన్ కి బదులుగా మొదటి ప్రాతిపల్లి ఎలిమెంట్తో సంబంధించి లొకేషన్ చేస్తారు.

ఎలిమెంట్ స్థానాన్ని "left", "top", "right" మరియు "bottom" అంశాల ద్వారా నిర్వచిస్తారు.

fixed

అబ్సూల్యూట్ లొకేషన్ కలిగిన ఎలిమెంట్ను బ్రౌజర్ విండోకు సంబంధించి లొకేట్ చేస్తారు.

ఎలిమెంట్ స్థానాన్ని "left", "top", "right" మరియు "bottom" అంశాల ద్వారా నిర్వచిస్తారు.

relative

రియేల్ లొకేషన్ కలిగిన ఎలిమెంట్ను స్థానంలో లొకేట్ చేస్తుంది.

కాబట్టి, "left:20" ఎలిమెంట్ యొక్క LEFT స్థానానికి 20 పిక్సెల్స్ జోడిస్తుంది.

static డిఫాల్ట్ విలువ. లొకేషన్ లేకుండా, ఎలిమెంట్ సాధారణ ప్రవాహంలో కనిపిస్తుంది (top, bottom, left, right లేదా z-index ప్రకటనలను పరిగణనలోకి లేదు).
inherit ఈ విధంగా position అంశాన్ని ప్రాతిపదికగా ప్రాతిపల్లి ఎలిమెంట్ నుండి పారంతరణ చేయవలసివుంది.

సాంకేతిక వివరాలు

డిఫాల్ట్ విలువ: static
పారంతరణ సామర్థ్యం: no
సంస్కరణ: CSS2
JavaScript సంకేతాలు: object.style.position="absolute"

TIY ఉదాహరణ

లొకేషన్: రియేల్ లొకేషన్
ఈ ఉదాహరణలో ఎలిమెంట్ను దాని సాధారణ స్థానానికి సంబంధించి ఎలా లొకేట్ చేయాలను చూపిస్తుంది.
లొకేషన్: అబ్సూల్యూట్ లొకేషన్
ఈ ఉదాహరణలో ఎలిమెంట్ను అబ్సూల్యూట్ విలువలతో ఎలా లొకేట్ చేయాలను చూపిస్తుంది.
లొకేషన్: ఫిక్స్ లొకేషన్
ఈ ఉదాహరణలో ఎలిమెంట్ను బ్రౌజర్ విండోకు సంబంధించి ఎలా లొకేట్ చేయాలను చూపిస్తుంది.
ఎలిమెంట్ రూపాన్ని సెట్ చేయడం
ఈ ఉదాహరణలో ఎలిమెంట్ రూపాన్ని ఎలా సెట్ చేయాలను చూపిస్తుంది. ఈ ఎలిమెంట్ ఈ రూపంలో కట్టబడి, చూపబడుతుంది.
Z-index
Z-index ఒక ఎలిమెంట్ను మరొక ఎలిమెంట్తో తర్వాత ఉంచడానికి ఉపయోగించబడవచ్చు。
Z-index
పై ఉదాహరణలో కొందరు ఎలిమెంట్స్ జి-ఇండెక్స్ మార్చబడ్డాయి。

బ్రౌజర్ మద్దతు

పట్టికలోని సంఖ్యలు ఈ లక్షణను పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంస్కరణను చెప్పుతాయి。

క్రోమ్ IE / ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
1.0 7.0 1.0 1.0 4.0