ቦታ አንጻራዊ - ምንድነው? ዝርዝር መግለጫ

የኤች.ኤስ.ኤል. አቀማመጥ ረጅም ሂደት ነው, በጥንቃቄ, ነገር ግን በጣም ፈጠራ ነው. ምንም እንኳን በቴክኖሎጂ መስክ ለተሰማሩ ብዙ ሰዎች የድረ-ገፆች አቀማመጥ አሰልቺ መስሎ ሊታይ ይችላል, ለዚሁ ተግባር በጥራት ብቻ ሳይሆን ስራውን ከማከናወኑም በላይ ተጨባጭ ደስታን ያገኛሉ.

ነገር ግን, ልምድ ያለው የድር ንድፍ ከመሆንዎ በፊት, እያንዳንዱ ኒዋቢ ለተለያዩ የኤች ቲ ኤም ኤል እና የእሱ የሲ.ኤስ.ኤል. የተለያዩ መመሪያዎችን እና ዝርዝር መስፈርቶችን ይማራሉ. የሲ.ኤስ. (CSS) ምንድነው , ምን እንደሆነ እና እንዴት "ጆሮዎች ያብጡ" የሚለው ነገር እርስዎ እንዲነሱ ያስችልዎታል, እንዲሁም አንዱ ታዋቂ የሆኑ ባህሪዎቿን - ቦታን አንጻራዊ - ዛሬ እንነጋገራለን.

CSS ምንድን ነው?

የሲኤስቢ ምህፃረ ቃል ሊተረጎም ይችላል እና በ "ዋልታ" ላይ "የሽምግሌት ሉሆች" በሚል ወደ ሩሲያኛ ሊተረጎም ይችላል. በጣም ግልጽ ነው-በአንድ በኩል, ልክ እንደ ቃላቱ እና ለመረዳት እንደሚቻል, ግን በሌላኛው ላይ - አጠቃላዩ ፍቺ አንድ በአንድ አይያዘም. ቀለል ባለ መንገድ እንጀምር - በቅንጦቹ. ይህ ቴክኖሎጂ በገጹ ላይ ያሉ ቁሳቁሶችን እንዲለቁ ያስችልዎታል, ይህም አንድ ጊዜ ብቻ ሊገለገልበት ይችላል, ነገር ግን ዘለዓለማዊ ጊዜዎችን ይጠቀማል.

በተሰኘው ኦፊሴላዊ ትርጉም ውስጥ "ጠረጴዛዎች" የሚለው ቃል በአጋጣሚ ሊከሰት ይችላል, እንዲያውም "ስፖንቶች" ወይም "ዝርዝር" የሚለውን ቃል መጠቀም የበለጠ ተገቢ ይሆናል, ነገር ግን የመጀመሪያ ትርጉሞች ደራሲዎች የሲ.ኤስ.ኤል (CSS) ከዝርዝሩ ዝርዝር እንደሚበልጥ እና እኛ ማን እንደዚህ ያሉ ሰዎች አሁን ይፈረድባቸዋል.

በመጨረሻም "ቁልቁል" የሚለው ቃል. እውነታው ግን እያንዳንዱ ንጥረ ነገር በአንድ ጊዜ በርካታ ቅጦችን ሊኖረው ይችላል, ይህም ሊደባለቅ ወይም መቋረጥም ይችላል. በእንደዚህ አይነት ሁኔታዎች, አሳሽ ለበርካታ ደንቦች መሞከር ይኖርበታል, በርካታ ቅጦችን የያዘው እቅደሙን በትክክል ለማቀናጀት, ለምሳሌ በቁርአን አንጻራዊ እና ሌላኛው - የቦርድ ጎደለ. በእርግጥ እነዚህ ግጭቶች ሊታገቱ አይችሉም, ነገር ግን በትልልቅ ፕሮጀክቶች ውስጥ እንዲህ ዓይነቱ ግራ መጋባት ብዙ ጊዜ ይከሰታል.

ስለዚህ ስም አሁን ግልጽ ሆኖ, አንድ ቀላል ምሳሌ እንመልከት. በድረ-ገጽዎ ውስጥ በተወሰነ መንገድ የተሰሩ ብዙ አዝራሮች አሉ እንበል. እንደ መጠናቸው, ጥላ, ግልፅነት እና ቀለም ያላቸው ባህሪያት አላቸው. እርግጥ ነው, እነዚህን መለኪያዎች መፈተሽ, እያንዳንዱን አዝራር መፍጠር ይችላሉ, ግን CSS ን ለመጠቀም የበለጠ ቀላል ይሆንልዎታል. በተግባር መሰረት, ከላይ የተጠቀሱትን የንብረት ዋጋዎች ዝርዝር ውስጥ መዘርዘር እና ከዚያ በኋላ ረዘም ያለ መቁጠር ከማንሳት ይልቅ የእያንዳንዱ አዝራር መለያ የዚህን መደብ ስም ብቻ መለየት ያስፈልገዋል, ከዚያ አሳሹ እነዚህን ቀለማት በተቀቡት ቀለማት ላይ እንደዚያው አድርጎ ይጽፋል እና ተገቢውን ይሰጣቸዋል. «Gloss».

ለምቾት ቦታ ለምን ያስፈልገኛል?

አሁን ደግሞ ሙሉውን ጽሑፍ ወደ መቀመጫ ቦታው እንሂድ. እንግሊዝኛን በደንብ የሚያውቁ ከሆነ ወይም ጥሩ የቃለ ምልልሱ ከሆኑ በትክክል ማወቅ አለብዎት - ይህ ንብረት ለኤለመንቱ ቦታ ሃላፊ ነው. በእርግጥ, ግን አንድ የተወሰነ ቦታ ከመወሰን ይልቅ, ይህ አሳሽ ለአጎራባች ወይም ሙሉውን ገፅ በአጠቃላይ እንዴት በትክክል ማስቀመጥ እንዳለበት ይነግረዋል.

የ Position ንብረቶች ምን ዓይነት እሴቶች ሊወስዱ ይችላሉ?

ንብረታችን ብዙ የተለያዩ እሴቶች ሊወስድ ይችላል, ከእነዚህ ውስጥም አምስት ብቻ ናቸው. ስለእያንዳንዳቸው አንድ አጭር መግለጫ እነሆ-

• የስራ መደቡ አካውንታንት ይህ ንብረቱ የወላጅዎን ንጥል ቦታ አቀማመጥ ለመቅዳት ያስችልዎታል. ለምሳሌ, ከተገለበጠ የቅርረት አንጻራዊ ቁጥር ጋር እኩል ካለዎት, IMG በሜሪም እሴቱ ላይ የተቀመጠው እሴት አንጻራዊ እሴት ያገኛል.
• ቋሚ ቦታ ይህ ካልሆነ በስተቀር ይሄ ዋጋ በራስ-ሰር ለ ሁሉም ክፍሎች ይሰጣል. የኤሌክትሮኒክስ ክፍሎች በአይነቱ ውስጥ ከተጠቀሱበት ቦታ ጋር ይጣጣማሉ, እንዲሁም ቦታቸውን ለመቀየር የሚያስችላቸውን ለተለያዩ "ጣፋጭ ምግቦች" አይገኙም.
• የሥራ ቦታ የ ንብረቱ ይሄ እሴት << ተንሳፋፊ >> ኤሌመንት ለመፍጠር አስፈላጊ በሚሆንበት ጊዜ ጥቅም ላይ ይውላል. ይህን ቋሚ ንብረት ካገኘ, ለቀሪው ክፍል የቀረበው ክፍል "የማይታይ" ነው. ያም ማለት የእነሱ ፍፁም አካል ፈጽሞ አይኖርም ማለት ነው. ገጹ ምንም ያህል ርካ የፈለገ ቢሆንም የትምህርቱ ሁልጊዜም በቦታው ይኖራል.
• ቦታው ተጠግኗል. በብዙ ሁኔታዎች ይህ እሴት ከቀድሞው ጋር ተመሳሳይ ነው, ይሁን እንጂ ትክክለኛው አባሉ ከወላጅ ጋር የተጣመረ ቢሆንም, ቋሚ አጠቃቀሞች በአሳሽ ማያ ገጹ የላይኛው ግራ ጥግ ላይ ማስተካከያዎችን ብቻ ሳይሆን ከዚያ በፊት ለቀረቡ ሌሎች ነገሮች ትኩረት በመስጠት ብቻ ነው.
• በመጨረሻም, ቦታን አንጻራዊ. ይህ ዓይነቱ ዋጋ ከሌሎች ጋር የሚዛመዱትን ዓረፍተ ነገሮች እንዲያስተካክሉ ያስችልዎታል. ይህ ደግሞ ለተራው ሕዝብ ተብሎ የሚጠራ "ግዙፍ" ተብሎ የሚጠራውን የማመቻቻ ማመቻቸት ሲፈጠር ጠቃሚ ሊሆን ይችላል. ይህን ንብረት ካገኘ / ች, ያኛው / ላት / ቀሪው የሚቀረው / የሚቀይረው ቦታ ላይ ገጹን የመቀየር ችሎታ ሳይኖረው.

በተለየ አሳሾች ውስጥ ከስራ ቦታ ጋር የተዛመደ ገጽታዎች

ሁሉም አሳሾች እኩል አይደሉም ተኳሃኝ አይደሉም. ምንም እንኳን ምንም አይነት ማቃለያዎችን ለማያው በአብዛኛዎቹ በይነመረብ የማሰሻ ፕሮግራሞች የፔሬሽኑ ዋጋ ሙሉ በሙሉ እውነት ነው, "በአስደሳች ልዩ" ኢንተርኔት ኤክስፕሎረር ልክ እንደ ስሪት በመነሳት ይህንን ንብረት ይወስናል.

ለምሳሌ, ቀድሞውኑ የተቀበረውን የ IE6 አሳሽ መጠቀም, የተስተካክለው እና ውርስ እሴቶችን መጠቀም አይችሉም - አህዮቹ በቀላሉ ችላ ይባላሉ. ሆኖም ግን, ከሰባተኛው ስሪት በኋላ ሁኔታው መስተካከል የጀመረ ቢሆንም, እና ቋሚነት ቀድሞውኑም ተጠናቅቋል, ወደ "Inherit" ሁሉም ሰው "አሳሾችን ለማውረድ አሳሽ" መውደዱን በስምንተኛው ፎርም ውስጥ አግኝቷል.

ቀሪዎቹ ገምጋሚዎች በ 90 ዎቹ አጋማሽ ላይ ተለቅቀው በ 4 ተኛው የዚህን ንብረት ድጋፍ አግኝቶ ኦፔራ ከተለየላቸው ኦፕሬሽን በስተቀር የመጀመሪያዎቹን ስሪቶች ዝምብለው ይመለከታሉ.

በጃቫስክሪፕት ውስጥ ካለው ሥራ ጋር መሥራት

እንዲያውም, በጃቫስክሪፕት ውስጥ ከሚገኘው የንብረት ንብረት ጋር እንዴት እንደሚሰራ ታሪካዊ ሁኔታን እናካፍላለን. ይህ ንብረት በስም ውስጥ ምንም ልዩ ቁምፊ የሌለበት ስለሆነ, ምንም አይነት ለውጦች ሳይሆኑ JS ን ሊጠቀሙ ይችላሉ, ለምሳሌ, ቦታን አንጻራዊ መለጠፊያ ለማስቀመጥ ይህን መስመር: div.style.position = 'relative' ማካተት አለብዎት.

እንደምታየው ሁሉም ነገር ቀላል ነው.

የቁርአን አንጻራዊ ክፍል ለየት ያለ ትኩረት መስጠት የሚገባው ለምንድን ነው?

የቦታው ንብረቶች አብዛኛውን እሴቶች በአካባቢው የሚገኙትን ነገሮች "የሱን አቀማመጥ", "እሴትን" በሚሉት አካባቢያዊ አካላት ላይ "ማፍሰስ" ቢያስቀምጡም, ሙሉውን ገጽ በአጠቃላይ ማስታወስ ሁልጊዜ አስፈላጊ ነው, ምክንያቱም የተሳሳተ አጠቃቀም ሙሉውን የማጣቀሻውን ይዘት "ማዛባ" .

በተጨማሪም, ይሄ ንብረቱ ብቻ በቋሚነት ዲዛይን ወደ ተቀጣጣይነት እንዲቀይሩ ያስችልዎታል, ምክንያቱም የእሱ መተግበሪያው የገጹን ይዘት በሙሉ ይነካል. በመቀጠልም, ይህንን እሴት አጠቃቀም ምሳሌዎች እና ስህተቶች ለመውሰድ ጊዜ ይኖረናል, እናም በተግባር ላይ ያለው ተጨባጭ እሴቱን ታያለህ.

አንጻራዊ አቀማመጥ መቼ መጠቀም አለብኝ?

ከተለምኖቹ የኤች.ቲ.ኤም.ኤል. ገጾች አቀማመጥ በተጨማሪ Position Relative በተደጋጋሚ የተለያዩ አዝናኝ ውጤቶችን ለመፍጠር ያገለግላል. ለምሳሌ, አንድ ገጽ ወደ አንድ ገጽ "የሚመጡ" ወይም ከህጻኑ ወደ ጠረጴዛዎችዎ "የሚመጡ" ነገሮችን ከፈለጉ, ይህ ንብረት በዚህ "ፌስቲት" ላይ እንዲተገበር ሊያግዝዎት ይችላል.

ተመሳሳይ የሆኑ "ዘዴዎች" በጃቫስክሪፕት (Javascript) ወይም በሶስት ደረጃ (css) አማካኝነት በሲትሰቲካል (CSS3) ባሕሪያት ውስጥ በ "ቫ"

በተጨማሪም, በአንዳንድ ሁኔታዎች, "የተዳቀለ" ቁሳቁስ አንጻራዊ እሴቶች መፍጠር ይቻላል. ሲኤስኤስ ምንም እንኳን በአንድ ቦታ ላይ እንደ ቦታ አቀማመጥ ያቀናብራል ነገር ግን ፍጹም አንጻራዊ ነው, ነገር ግን አንዳንድ ብልሃቶችን በመጠቀም ይህንን ውጤት ሊያገኙ ይችላሉ. ይህ አቀራረብ እንደ ውስብስብ የመሳሪያ ወይንም የአገባብ ምናሌ የሆነ ነገር ለመፍጠር በሚፈልጉበት ጊዜ እነዚህ ዘዴዎች ጠቃሚ ሊሆኑ ይችላሉ. ምሳሌዎችን ስንመለከት እንደነዚህ ያሉ "ትውልደሮችን" አወቃቀር እንመለከታለን.

አንጻራዊ አቀማመጥን የመጠቀሚያ ምሳሌዎች

Position relative አንጻራዊ ቀላል ነገር ግን ተለዋዋጭ የሆኑ መሳሪያዎችን ለመተንተን ያስችሎታል. ጥቅም ላይ የማይውሉ የአብነት ኮዶችን ለመጻፍ ጊዜንና ቦታን ለማባከን እንዳይባክን, ለጣቢያዎ ወይም ለእያንዳንዱ ገጾቹ ማስጌጥ የሚችሉ አንዳንድ የቃል አጻጻፍ ስልቶችን እንሰጣለን.

በ "መጥፋበት" መስመር ውስጥ እንጀምር. ከመግቢያው በግራ ጠርዝ በስተጀርባ "የሚጓዝ" ነገር እና ቀስ በቀስ ወደ ቀኝ በኩል ይንቀሳቀሳል. ይህን የመሰለውን "ዘዴ" ለመተግበር, አቀማመጥን ማስተካከል ያስፈልግዎታል. በስተግራ: -100 ፒክሰል, ማለትም -100 የታጠረውን ስፋት የያዙ የፒክሴሎች ብዛት ነው. ይህ ቅፅ ከማያ ገጹ ውጭ ያለውን ጥብቅ መደበቅ, ወደ "የመጀመሪያ ቦታ" በማስተካከል እንዲደበቁ ያስችልዎታል. አሁን የአስረካቢውን ወርድ ከአምስት ውስጣዊ ስፋት ጋር በማነፃፀር የአምስት ወርድ ቤቱን እያንዳንዷን ሚሊሰከንዶች እሴትን የሚጨምር ቅፅን መጠቀም ይችላሉ. በውጤቱም, ከግራው ጠርዝ በስተኋላ የሚታይ ማገዣ, በማያ ገጹ በሙሉ ይሮጣል እና በቀኝ በኩል "ያቆመ" አንድ እገዳን እናገኛለን.

ሌላው ምሳሌ "በአንጻራዊ ሁኔታ ፍጹም" የሆኑ ነገሮችን እንዲፈጥሩ ያስችልዎታል. ለምሳሌ, አንጻራዊ ቦታ ካለው ሌላ ውስጣዊ አካል ውስጥ ማስገባት ይችላሉ. በውጤቱም አንድ መጠነ-ስፋት የሌለባቸው "ዘውግ" እገዳ ያለው ሲሆን, ከእርሱ በፊት በተዘረዘሩት ነገሮች ላይ የተመረኮዘ አቋም ለመግለጽ ብቃት አለው.

አማካይ ስህተቶች ሲጠቀሙ የተለመዱ ስህተቶች

አንጻራዊ ቦታን በሚጠቀሙበት ጊዜ በጣም የተለመደው ስህተት ብዙ የኪንሰፐርሽንስ ዲዛይቶች በየትኛውም ቦታ ሊገኙ ለሚችሉ ማጠራቀሻዎች የመጠባበቂያ ቦታ የመጠባበቅ ችሎታ ይረሳሉ. ለምሳሌ በጣም ሰፊ የሆነ ካለዎት, ከማያ ገጹ ውጭ ይሰኩ እና አንጻራዊ አቀማመጥ ሲኖር, "ቀዳዳ" በእሱ ቦታ ይታያል. ይሁን እንጂ ይህ አንዳንድ ውጣ ውረዶች አንዳንዴ ለትክክለኛ ሁኔታ ጥቅም ላይ ሊውሉ ይችላሉ, ለምሳሌ "የራስ ሰበሰበ" ጣቢያው ጣቢያው የሚያመጣው ውጤት የሚያስከትልበት, ሁሉም ቁስሎቹ ቀስ በቀስ በደረጃው ላይ ይቀመጣል. ግራ: 0; ይህም በዋናነትው ውስጥ ነው.