CSS స్థానం: ఉదాహరణలు

. లేఅవుట్ ప్రారంభ తరచూ CSS ద్వారా స్థానాలు అంశాలతో ఇబ్బందులు ఎదుర్కొంటున్నాయి. Position куда проще в освоении, чем кажется на первый взгляд. వాస్తవానికి, CSS స్థానం ఆస్తి అది మొదటి చూపులో తెలుస్తోంది కంటే తెలుసుకోవడానికి చాలా సులభం. వాటిని మాస్టరింగ్ ద్వారా, మీరు మీకు కుడి ప్రదేశాల్లో అన్ని పేజీ మూలకాలు ఏర్పాటు చేసుకోవచ్చు ఒక శక్తివంతమైన సాధనం పొందండి. добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются కాని ఫలితాలు పొందడానికి, మీరు అన్ని ఇప్పటికే విలువల గురించి తెలుసుకోవాలి వారి చర్యల సూత్రాలు చాలా భిన్నంగా ఉంటాయి ఎందుకంటే

పత్రం ప్రవాహం యొక్క ప్రత్యేకతలు

работает с потоком веб-страницы. స్థానం CSS వెబ్ పేజీ ప్రవాహం పనిచేస్తుంది. ఎలా ఈ అర్థం? html- разметке. డిఫాల్ట్గా అన్ని పేజీ మూలకాలు హెచ్టిఎంఎల్ మార్కప్ వాటిని సృష్టించిన క్రమంలో అమర్చబడి ఉంటాయి. header расположен над тегом footer, то и на странице он будет отображаться выше. శీర్షిక ట్యాగ్ను తర్వాత ట్యాగ్ ఫుటరు లో ఉన్న, మరియు ఇది పేజీ పైన ప్రదర్శించబడుతుంది. footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». దీనికి విరుద్ధంగా, కొన్ని కారణాల కోసం మీరు "హెదర్" పై html లో ఒక ఫుటరు ఉంచడానికి నిర్ణయించుకుంటే, "అంతస్తులో" పేజీ "టోపీ" పైన ప్రదర్శించబడుతుంది. ఈ సందర్భంలో, బ్లాక్ ఎలిమెంట్లు మొత్తం వెడల్పు వారికి అందుబాటులో ఆక్రమిస్తాయి. చిన్న, క్రమంగా, ఒక వరుసలో, అది తీసుకుంటున్నారా అయితే, మరియు మీరు కొత్త బదిలీ చేయబడుతుంది ఏర్పాటు చేస్తారు. ఈ విధానం "పత్రం ప్రవాహం" అని పిలుస్తారు.

ప్రవాహం ప్రవర్తన ఉపయోగించబడుతుంది స్థానం ఆస్తి మార్చడానికి . CSS లో. float, но его мы рассматривать не будем. ఇది కూడా ఫ్లోట్ యొక్క లక్షణాలు కారణంగా మారవచ్చు, కానీ అది భావిస్తారు కాదు. ఉంచుతాయి సభ్యునితో తరువాత, అది భిన్నంగా ప్రవర్తించేందుకు ప్రారంభమవుతుంది సాధారణ ప్రవాహం, "పతనం" తయారు చేయవచ్చు. ఎలా సరిగ్గా - ఇది ఆస్తి ఉపయోగిస్తారు విలువ ఆధారపడి ఉంటుంది.

CSS స్థానం: స్టాటిక్

или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. స్థానం: స్టాటిక్, లేదా స్టాటిక్ స్థానాలు మీరు సృష్టించిన అన్ని html బ్లాకుల అప్రమేయం. సాధారణ పరిస్థితుల్లో, మీరు అతనితో వ్యవహరించే లేదు. static. ఏ బ్లాక్ లేదా లైన్ అన్ని ఏ స్థితిలో నిర్వచించబడిన చేయకపోయినా, కాబట్టి అది ముఖ్యమైన స్థిరమైనది. పేజీలో ఆ భాగం ప్రవాహం అనుగుణంగా ప్రదర్శించబడుతుంది. right/left или top/bottom, никакого эффекта не будет. మీరు ఎడమ లేదా పైన / క్రింద అతనికి ఆస్తి హక్కు / చూపిస్తే, ఎటువంటి ప్రభావం ఉంటుంది.

CSS స్థానం: స్థిర

оказывается вне нормального потока документа. ఈ ఆస్తి ఉపయోగించి చేసినప్పుడు, మూలకం పత్రం యొక్క సాధారణ ప్రవాహం వెలుపల ఉంది. относительно окна браузера, независимо от того, как размещаются прочие компоненты. ఇప్పుడు తన స్థానం సంబంధం లేకుండా ఇతర భాగాలు ఎలా ఉన్నాయి యొక్క, బ్రౌజర్ విండో సంబంధిత లెక్కిస్తారు. : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком. ఇతర మాటలలో, స్థానం తో ఒక బ్లాక్: స్థిర బ్రౌజర్ విండో యొక్క అంచు వ్యతిరేకంగా ఒత్తిడి పేజీ ఎగువన, వదిలి, మరియు ఇతర అంశాలు ప్రవాహం ప్రకారం దాని జరుగుతాయి.

స్థిర స్థానంలో అంశాలను ప్రధాన లక్షణం వారు ఇతర బ్లాక్స్ మరియు పేజీ స్ట్రింగ్ పోలిక ఉంది. : fixed будет будто бы оставаться на месте, не исчезая с экрана. స్థానం తో బ్లాక్ స్క్రోలింగ్: స్థిర దయ్యం స్క్రీన్ నుండి అదృశ్యమవడం లేకుండా స్థానంలో ఉంటుంది. మీరు నావిగేట్ ఇది వినియోగదారు ఎల్లప్పుడూ యాక్సెస్ కలిగి ఉండాలి, లేదా వంటి అవసరం ఉంటే ఈ ఉపయోగకరంగా ఉంటుంది. మీరు పేజీ యొక్క ఒక నిర్దిష్ట భాగం లో ఒక శీఘ్ర స్క్రోల్ బటన్ ఉంచడానికి అనుకుంటే స్థిర స్థానాలు కూడా ఉపయోగించారు.

CSS స్థానం: సంబంధిత

. ఈ ఆస్తి ఉపయోగించి సాపేక్ష స్థానాలు అంటారు. : relative, тот останется на своем месте. మీరు అంశాన్ని ప్రాపర్టీ స్థానం సెట్ ఉంటే: సాపేక్ష, అతను దాని స్థానంలో ఉంటుంది. right/left и top/bottom. మొదటి చూపులో, ఏమీ చాలా జరుగుతుంది, కానీ మరింత ఉపయోగం లక్షణాలు కుడి / ఎడమ మరియు పైన / క్రింద ఉంటే అన్ని మార్పు. వారు దాని స్థానానికి భాగం బంధువు ఉద్యమం నియంత్రించడానికి ఉపయోగించవచ్చు. останутся на своих положениях, не обращая внимания на освободившееся место . బ్లాక్ లేదా లైన్ ఉపయోగిస్తారు ప్రదేశానికి లో, ఒక ఖాళీ స్థలం ఉంటుంది - ఇతర అంశాలు ఖాళీ దృష్టి పెట్టారు లేదు, వారి స్థానాల్లో ఉన్నాయి.

మీరు తరలించడానికి ఉన్నప్పుడు భాగం పేజీ యొక్క పరిసర ప్రాంతాలు స్థానం ప్రభావితం చేయదు. అయితే సాపేక్షంగా స్థానంలో బ్లాక్ వాటిని నిరోధించవచ్చు వారు స్థానంలో ఉంటుంది. లోనే, ఆస్తి అరుదుగా ఉపయోగిస్తారు. సాధారణంగా ఇది క్రింది అవతారం తో కలిపి ఉపయోగిస్తారు.

సంపూర్ణ స్థానాలు

అత్యంత ఆసక్తికరమైన మరియు చాలా తరచుగా ఉపయోగించే ఎంపికలు ఒకటి. లక్షణాలు స్థానం ఉపయోగిస్తున్నప్పుడు absolute положение компонента страницы будет высчитываться относительно окна браузера. పేజీ భాగం యొక్క సంపూర్ణ స్థానం విలువ బ్రౌజర్ విండో సంబంధిత లెక్కించబడతాయి. элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. ఇతర అంశాలు (కాని ఖచ్చితంగా స్థానంలో) స్థానం యొక్క ఉనికికి "సోదరుడు" గురించి "మర్చిపోతే" వంటి: నిరపేక్ష మరియు స్ట్రీమ్లో తన జరుగుతాయి. : fixed, но есть и серьезные различия. ఇది ప్రతిదీ సరిగ్గా స్థానం విషయంలో అదే అని అగుపిస్తుంది: స్థిర, కానీ ముఖ్యమైన తేడాలు ఉన్నాయి.

top/right/bottom/left. ముందుగా, మూలకం యొక్క స్థానం ఉచితంగా నియంత్రిత చేయవచ్చు - ఈ ఆస్తి టాప్ / కుడి / దిగువ / ఎడమ వినియోగించబడతాయి. bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. ఉదాహరణకు, మీరు క్రింద విలువ సెట్ ఉంటే: 100 px, బ్లాక్ పేజీ 100 పిక్సెళ్ళు దిగువ నుండి "ఆఫ్ పుష్". రెండవది, "సంపూర్ణ" భాగం స్క్రోలింగ్ బదులుగా ఒక పేజీకి నావిగేట్ యొక్క, స్థానంలో ఉంటుంది.

ఇంటరాక్షన్ మాతృ అంశాలతో సంపూర్ణ యూనిట్లు

మీరు ఖచ్చితంగా స్థానంలో భాగం మీద ఎక్కువ ఖచ్చితమైన నియంత్రణ సాధించింది. : fixed, relative или absolute. ఇది చేయటానికి, మీరు దాని మాతృ ఆస్తి స్థానం సెట్ చేయాలి: స్థిర, సంబంధిత లేదా సంపూర్ణ.

ఒక ఉదాహరణ పరిగణించండి. div с классом relative-div, внутри которого размещается div с классом absolute-div. మీరు లోపల సంపూర్ణ-div తరగతి ఒక div ఉంచుతారు సాపేక్ష-div ఒక తరగతి, ఒక div ఉందా. : absolute. నిరపేక్ష: మేము ఇండోర్ యూనిట్ ప్రాపర్టీ స్థానం సెట్. అతను వెంటనే స్ట్రీమ్ నుండి "తీసుకువెళతాడు" మరియు ఇప్పుడు దాని స్థానాన్ని బ్రౌజర్ విండో సంబంధిత లెక్కిస్తారు ఎగువన, ఎందుకంటే ఎక్కడో ఉంది. relative-div свойство Position : relative и «блудный сын» возвращается на место. ఇప్పుడు తరగతి సాపేక్ష-div స్థానం ఆస్తిని బ్లాక్ ఇచ్చిన సాపేక్ష మరియు "తప్పిపోయిన కుమారుడు" స్థానంలో తిరిగి ఉంది. దాదాపు. నిజానికి, అది పేరెంట్ మూలకం యొక్క ఎగువ ఎడమ మూలలో కనిపిస్తుంది.

ఎందుకు ఈ ఫోజు? : absolute. నిర్దిష్టత లక్షణాలు స్థానం లో డీల్: సంపూర్ణ. static, позиция начинает зависеть от родительского элемента. అప్రమేయంగా, దాని స్థానాన్ని మీ బ్రౌజర్ ఆధారపడి, కానీ "తల్లిదండ్రుల" కూడా ఏదైనా కానీ నిశ్చలంగా స్థానంలో ఉంటే, స్థానం పేరెంట్ మూలకం ఆధారపడి ప్రారంభమవుతుంది. మీరు బ్రౌజర్ విండో సంబంధిత proschityvaya భారీ సంఖ్యలు లేకుండా ఎక్కడైనా భాగం ఉంచవచ్చు ఎందుకంటే ఈ గొప్ప ఉంది. అడ్మిషన్ తరచూ చిహ్నాలు, బటన్లు మరియు ఇతర చిన్న అంశాలు ఉంచడానికి ఉపయోగిస్తారు.

స్థానం CSS కేంద్రీకృతమై

ప్రధాన సమస్యలను ప్రారంభ ఒకటి నిలువుగా మరియు అడ్డంగా మూలకం సెంటర్ ఉంది. , сделать это проще простого. సరిగా స్థానం ఆస్తి ఉపయోగించి, సులభం. CSS స్థానం: క్రింది సెంటర్ వద్ద సంపూర్ణ సెట్. iv с классом absolute-div, который находится в «диве» с классом relative-div. మీరు తరగతి సాపేక్ష-div కు "దివా" లో ఇది ఒక తరగతి d iv సంపూర్ణ-div, చెప్పటానికి. "తల్లిదండ్రుల" మరియు దాని వెడల్పు మొత్తం పేజీ యొక్క వెడల్పు సమానంగా స్థానంలో సాపేక్ష. и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента. "వారసులుగా" వెడల్పు మరియు 400 px, సంపూర్ణ స్థానాలు ఒక ఎత్తు ఉంది, మరియు పేరెంట్ మూలకం యొక్క ఎగువ ఎడమ మూలలో అప్రమేయంగా ఉంది.

top: 50 % и left: 50 %. 50% మరియు ఎడమ: 50% - మీరు చేయవలసిందల్లా సంపూర్ణ భాగం టాప్ సెట్ ఉంటుంది. దాదాపు పూర్తయింది! сдвинулся с места и оказался почти в центре, но не совсем. సంపూర్ణ-div బడ్జె మరియు దాదాపు మధ్యలో ఉంది, కానీ చాలా. "తల్లిదండ్రుల" తన చివరి వరకు సంబంధించినవి, మరియు మేము బ్లాక్ మధ్యలో పొందాలి మధ్యలో నిరూపించబడింది అంటే "విత్తనం." margin-left и margin-right со значениями -200 px. ఇది చేయటానికి, మీరు విలువలు -200 px అతనిని ఒక మార్జిన్-ఎడమ మరియు మార్జిన్ కుడి అడగాలి. ఆ విధంగా, మనం దాని ఎత్తు మరియు వెడల్పు సగం లో ఖచ్చితంగా స్థానంలో బ్లాక్ మారవచ్చు. మధ్యలో అది అన్ని!

అతివ్యాప్తి భాగాలు

వారి "పొరుగు" స్థానంలో అంశాలు "విధించిన" మొదటి చూపులో సమస్య కష్టం ఉంటుంది. : fixed будет перекрывать все, что расположено на странице. ఉదాహరణకు, భాగం స్థానం: స్థిర అన్ని పేజీలో ఉన్న భర్తీ చేస్తుంది. z-index, однако помните, что оно работает только для позиционированных элементов. పరిస్థితి అధిగమించడానికి, మీరు z-index లక్షణాలను ఉపయోగిస్తాయి, కానీ అది మాత్రమే స్థానంలో అంశాలను కోసం పనిచేసే గుర్తుంచుకోగలరు. దీని ప్రకారం, మీరు స్థిరమైన స్థానంలో మూలకం పైన ఒక బ్లాక్ ఉంచాలనుకుంటే ఉంటే, ఈ యూనిట్ కూడా స్థానాలు సెట్ ఉంటుంది. ఉదాహరణకు, ఒక సాపేక్ష.

учший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. ప్రయోగం మరియు వివిధ ఏదో ప్రయత్నించండి భావిస్తారు ఉదాహరణలు స్థానం CSS - స్థానాలు నైపుణ్యం ఒక ఉత్తమ మార్గం. calc() – это даст возможность более гибко настраивать расположение. ఫంక్షన్ Calc () తో కలిసి అది ఉపయోగించడానికి తెలుసుకోవడానికి ప్రయత్నించండి - ఈ స్థానం సర్దుబాటు సౌలభ్యాలతో ఎనేబుల్ చేస్తుంది. అయితే, ఈ ఆస్తి మొత్తం "నెట్" పుటలు కోసం ఉద్దేశించినది కాదు గుర్తుంచుకోవాలి. దానితో, మీరు అయోమయం పొందుటకు చాలా సులభం ఉంటుంది, సాపేక్షంగా చిన్న అంశాలు తరలించడానికి అవసరం లేదా.