CSS లేఆఉట్ - position గుణం

position అమర్తులు ప్రయోగించబడుతుంది ఎలిమెంట్ లోకేషన్ మెథడ్ రకం (static, relative, fixed, absolute లేదా sticky) ని నిర్ణయిస్తుంది.

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

  • స్టాటిక్
  • relative
  • fixed
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position: static;

హెచ్ఎంఎల్ మెటాలు యొక్క డిఫాల్ట్ పోసిషన్ స్టాటిక్ (స్టాటిక్) ఉంటుంది.

స్టాటిక్ పోసిషన్ చేయబడిన మెటాలు top, bottom, left మరియు right అట్టర్బ్యూట్స్ పై ప్రభావం లేదు.

position: static; స్థానాన్ని నిర్ణయించబడిన మెటాలు ఏ ప్రత్యేక రీతిలో స్థానాన్ని నిర్ణయించబడదు; అది ఎల్లప్పుడూ పేజీ యొక్క సాధారణ ప్రవాహం పైన స్థానాన్ని నిర్ణయించబడుతుంది:

ఈ <div> మెటాలు పోసిషన్: స్టాటిక్ సెట్ చేయబడింది;

ఇది ఉపయోగించబడుతున్న సిఎస్ఎస్:

ఉదాహరణ

div.static {
  position: static;
  border: 3px solid #73AD21;
}

మీరే ప్రయత్నించండి

position: relative;

position: relative; స్థానాన్ని సమానంగా సమీపంలోని పోసిషన్ చేయబడిన పూర్వగామి మెటాలు పైన స్థానాన్ని నిర్ణయించబడుతుంది (ఫిక్సెడ్ కంటే విషయంగా వీక్షణ పట్టికకు కాదు).

పోసిషన్ రీలేటివ్ మెటాలు యొక్క top, right, bottom మరియు left అట్టర్బ్యూట్స్ సెట్ చేయడం ద్వారా దాని సాధారణ స్థానం నుండి దూరంగా ఉంచబడుతుంది. మరియు మెటాలు స్థానం లో వదిలిన ఏ అంతరాన్ని సరికూర్చడానికి మరొక విషయం చేయబడదు.

ఈ <div> మెటాలు పోసిషన్: రీలేటివ్ సెట్ చేయబడింది;

ఇది ఉపయోగించబడుతున్న సిఎస్ఎస్:

ఉదాహరణ

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

మీరే ప్రయత్నించండి

position: fixed;

position: fixed; విషయంగా వీక్షణ పట్టికకు పోసిషన్ చేయబడిన మెటాలు పేజీ స్క్రోల్ అయినప్పటికీ ఎల్లప్పుడూ ఒకే స్థానంలో ఉంటాయి. top, right, bottom మరియు left అట్టర్బ్యూట్స్ ఈ మెటాలు స్థానాన్ని నిర్ణయించబడతాయి.

ఫిక్సెడ్ పోసిషన్ చేయబడిన మెటాలు పేజీలో సాధారణంగా పెట్టబడే స్థానంలో అంతరాన్ని వదిలివేయదు.

పేజీ కుడి తక్కువ మూలన ఈ ఫిక్సెడ్ మెటాలు ఉంది. ఇది ఉపయోగించబడుతున్న సిఎస్ఎస్:

ఉదాహరణ

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

మీరే ప్రయత్నించండి

ఈ <div> మెటాలు పోసిషన్: ఫిక్సెడ్ సెట్ చేయబడింది;

position: absolute;

position: absolute; స్థానాన్ని సమానంగా సమీపంలోని పోసిషన్ చేయబడిన పూర్వగామి మెటాలు పైన స్థానాన్ని నిర్ణయించబడుతుంది (ఫిక్సెడ్ కంటే విషయంగా వీక్షణ పట్టికకు కాదు).

అయితే, అబ్సూల్యూట్ పోసిషన్ చేయబడిన మెటాలు సాథిరాని పూర్వగామి లేకపోతే, అది డాక్యుమెంట్ బాడీ (body) ను వాడి, పేజీ స్క్రోల్ తో కలిసి కదులుతుంది.

మీరు లెక్కించండి:“పోసిషన్ చేయబడిన” మెటాలు దాని స్థానాన్ని తిరిగి పొందబడుతుంది: స్టాటిక్ పొందాని ఏ మెటాలు.

ఈ ఒక సాధారణ ఉదాహరణ:

ఈ <div> మెటాలు పోసిషన్: రీలేటివ్ సెట్ చేయబడింది;
ఈ <div> మెటాలు పోసిషన్: అబ్సూల్యూట్ సెట్ చేయబడింది;

ఇది ఉపయోగించబడుతున్న సిఎస్ఎస్:

ఉదాహరణ

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

మీరే ప్రయత్నించండి

position: sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

మీరు లెక్కించండి:Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom లేదా left ఒకటి నుండి మరొకటి మధ్య పరివర్తన చేయడానికి ఉపయోగిస్తారు. మొదటిగా ఇది స్థిరమైన లోకేషన్ గా ఉంటుంది, విన్నర్ లో ప్రదర్శించబడుతుంది మరియు ప్రదర్శించబడుతుంది వరకు ఇది స్థిరమైన స్థానంలో ఉంచబడుతుంది (ఉదాహరణకు position:fixed).

ఈ ఉదాహరణలో, స్టికీ ఎలిమెంట్ స్క్రాల్ స్థానానికి చేరుకున్నప్పుడు పేజీ టాప్ లో ఉంచబడుతుంది (top: 0)

ఉదాహరణ

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  బ్యాక్గ్రౌండ్ కలర్: గ్రీన్;
  బార్డర్: 2px సోలిడ్ #4CAF50;
}

మీరే ప్రయత్నించండి

అద్దంగా ఉన్న ఎలిమెంట్లు

ఎలిమెంట్లను లోకేషన్ చేయటంలో, వాటిని ఇతర ఎలిమెంట్లతో అద్దంగా పెట్టవచ్చు.

z-index అట్టిట్యూబ్ ఎలిమెంట్ల స్టాక్ ఆర్డర్ నిర్దేశిస్తుంది (ఏ ఎలిమెంట్ ఇతర ఎలిమెంట్ల ముందు లేదా తరువాత ఉండబోతుంది).

ఎలిమెంట్లు స్టాక్ ఆర్డర్ సెట్ చేయవచ్చు లేదా పాటించబడవచ్చు:

ఈ ఉదాహరణ లో ఈ పేరు ప్రస్తావించబడింది

ఎంటర్ కోడ్ లో చిత్రం యొక్క z-index పదవి -1 కావడంతో, ఇది పాఠం వెనుక ఉంటుంది.

ఉదాహరణ

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

మీరే ప్రయత్నించండి

అధిక స్టాక్ ఆర్డర్ కలిగిన ఎలిమెంట్లు తక్కువ స్టాక్ ఆర్డర్ కలిగిన ఎలిమెంట్లకు ముందు ఉంటాయి.

మీరు లెక్కించండి:రెండు లోకేషన్ చేయబడిన ఎలిమెంట్లు మెలియగా ఉన్నప్పుడు ఎంటర్ కోడ్ లో సెట్ చేయబడని ఎలిమెంట్లు z-indexఅయితే, ఎంటర్ కోడ్ లో చివరి ఎలిమెంట్ టాప్ లో చూపబడుతుంది.

లోకేషన్ చిత్రంలో పాఠం నిర్దేశించండి

చిత్రంపై పాఠం పెట్టడానికి ఎలా:

ఉదాహరణ

CodeW3C.com Logo
బోటమ్ లెఫ్ట్
టాప్ లెఫ్ట్
టాప్ రైట్
బోటమ్ రైట్
సెంటర్డ్

మీరే ప్రయత్నించండి:

టాప్ లెఫ్ట్ టాప్ రైట్ బోటమ్ లెఫ్ట్ బోటమ్ రైట్ సెంటర్డ్

మరిన్ని ఉదాహరణలు

ఎలిమెంట్ రూపం సెట్ చేయండి
ఈ ఉదాహరణ మేలా కొన్ని సాంకేతికతలను ప్రదర్శిస్తుంది. అంతేకాకుండా, ఎలిమెంట్ ను ఈ రీతిలో కట్టి చూపుతుంది.

అన్ని CSS లోకేషన్ అట్టిట్యూబ్లు

అట్టిట్యూబ్ వివరణ
bottom సెట్ లోకేషన్ బాక్స్ బోటమ్ ఆడిట్ మార్గం.
clip 剪裁绝对定位的元素。
left 设置定位框的左侧外边距边缘。
position 规定元素的定位类型。
right 设置定位框的右侧外边距边缘。
top 设置定位框的顶部外边距边缘。
z-index 设置元素的堆叠顺序。

延伸阅读

课外书：CSS పోజిషనింగ్ మ్యానియల్

课外书：CSS రెలేటివ్ పోజిషనింగ్

课外书：CSS అబ్సోల్యూట్ పోజిషనింగ్