සාපේක්ෂ පිහිටීම - එය කුමක්ද? සවිස්තර විස්තරයක්

කුරුල්ලන් ලැග සිටින HTML - දීර්ඝ ක්රියාවලියක් දැඩි, නමුත් ඉතා නිර්මාණාත්මක. තොරතුරු තාක්ෂණ සේවය කරන මිනිසුන් වැඩි ප්රමාණයකගේ, වෙබ් පිටු සැකැස්ම කම්මැලි සාමාන්ය පෙනී යා හැකි බව නොතකා, එවැනි අවස්ථාවක සඳහා වෘත්තිය ඇති විශේෂඥයින් ගුණාත්මකව සිදු කර්තව්යය ඉටු පමණක් නොව, දැනෙන සතුට ක්රියාවලිය ලැබෙන.

කෙසේ වෙතත්, ඔබ පළපුරුදු සදහාද සහය දක්වනු ලැෙබි බවට පත් පෙර, එක් එක් නවකයෙක් වූ විවිධ උපදෙස් හා HTML භාෂාව දෙකම පිරිවිතර අධ්යයනය කාලය ගොඩක් වැය, සහ එහි හිතමිතුරු මත - CSS. හරියටම ගැන කුමක් CSS, ඒක මොකක්ද දේ "feint කන්" ඔබ ලබා ගැනීමට ඉඩ ලබා දෙන අතර, මෙන්ම එහි ඉහළ ගුණ එක් - සාපේක්ෂ පිහිටීම - අද අපි කතා කරමු.

CSS වේ කුමක්ද?

CSS වචන සහ "කඩා හැලෙන යෙදා" ලෙස රුසියානු බවට පිටපත් හා පරිවර්තනය කළ හැක. එය ලස්සන අමුතු ශබ්ද - එක් අතකින් එය පැහැදිලිව දක්නට සහ වචන, හා අනෙක් - පොදු අර්ථය වහාම අල්ලා නැත. ගේ සරල ආරම්භ කරමු - ශෛලිය සමග. මෙම තාක්ෂණය ඔබ එක් වරක් පමණක් ලියාපදිංචි හා වාර අනන්ත සංඛ්යාවක් භාවිත කළ හැකි පෙනුම ගැන යම් යම් ලක්ෂණ, පිටුව මත වස්තූන් අනුයුක්ත කිරීමට ඉඩ දෙයි.

නිල පරිවර්තනය "මේසය" අහම්බෙන් වාගේ පෙනී යන වචනය - මෙහි ඇත්ත වඩාත් සුදුසු "ලැයිස්තු" හෝ "ලැයිස්තු" යන වචනය භාවිතා කිරීම වනු ඇත, කෙසේ වෙතත් මුල් පරිවර්තන කරන කතුවරුන් තැටියක CSS ලැයිස්තුවක් වඩා වගේ තීරණය, සහ අපි කවුද එවැනි ඒවා උත්සාහ කිරීමට දැන්.

අවසාන වශයෙන්, වචනය "තීරු දර්ශන." යන කාරනය එක් එක් මූලද්රව්යය මිශ්ර කළ හැකි බව හෝ ඒවායෙහි මෝස්තර කිහිපයක් හැකි බව ය. එවැනි අවස්ථාවලදී, බ්රව්සරය නීති මාලාවක් පිහිට ලබා ගැනීමට ඇති, ඉන් එක් සමග, මෝස්තර කිහිපයක් වීමට සිදු වූයේ වන අතර, වාරණ, පෙනුම රචනා කිරීම සඳහා, උදාහරණයක් ලෙස, තත්ත්වය සාපේක්ෂ දේපළ හා අනෙක් තැනැත්තා - ස්ථ ානය නිරපේක්ෂ. ඇත්ත වශයෙන්ම, එවැනි ගැටුම් ඉවසා ගත නොහැකි, නමුත් විශාල ව්යාපෘති එවැනි අවුල් සහගත බොහෝ විට සිදු වේ.

ඒ නිසා දැන්, හැම දෙයක්ම නම පැහැදිලි වන විට, ඔහුගේ සරල උදාහරණයක් සලකා බලමු. ගේ ඔබේ වෙබ් අඩවිය, එක්තරා ආකාරයකට නිර්මාණය බොත්තම් විශාල සංඛ්යාවක් විය යුතු කියන්න මට ඉඩ දෙන්න. ඔවුන් එවැනි ප්රමාණය, සෙවනැල්ල, පාරාන්ධතාව, වර්ණය ලෙස ගුණ ඇත. ඇත්ත වශයෙන්ම, ඔබ එක් එක් බොත්තම නිර්මාණය, මෙම පරාමිතියන්, නමුත් CSS භාවිතා කිරීමට වඩාත් පහසු වේ හැක. භාවිතයේ දී, ඔබ ඉහත ගුණ සියලු වටිනාකම් ලැයිස්තු වන යම් පන්තිය, විස්තර කිරීමට අවශ්ය, පසුව, ඒ වෙනුවට දීර්ඝ ලැයිස්තුවට, එක් එක් බොත්තමක් ටැගය පමණක් පන්තියේ නම සදහන් කිරීමට, එවකට බ්රව්සරය ම අපේක්ෂිත වර්ණ මෙම මූලද්රව්ය වර්ණය හා ඔවුන් සදහා විධිමත් ඇත අවශ්ය වනු ඇත "රටවල්වල බොහෝ".

මෙම තත්ත්වය දේපල කුමක්ද?

අපි දැන් වන මේ මුළු ලිපිය ආරම්භ කරන ලදී වෙනුවෙන්, දේපල තනතුර කෙලින්ම ඉදිරියට යන්න. ඔබ ඉංග්රීසි භාෂාව හුරු පුරුදු, හෝ හොඳ දෙබස් කවන ශිල්පීනියක තිබේ නම්, ඔබ මේ වන විටත් පැහැදිලි විය යුතු අතර - මෙම දේපල අයිතමය ඇති ස්ථානය සඳහා වගකිව යුතු වේ. ඇත්ත වශයෙන්ම, එය, එහෙත් ඒ වෙනුවට නිශ්චිත ස්ථානය තීරණය මාර්ගය, මෙම දේපළ එය එකක් හෝ යාබද හෝ සමස්තයක් ලෙස පිටුව පුරා සම්බන්ධයෙන් තවත් අංගයක් ස්ථානගත කළ යුතු ආකාරය බ්රව්සරය කියයි.

මෙම තත්ත්වය දේපල යුතු අගයන් විය හැක්කේ කෙසේද?

අපගේ දේපළ වෙනස් අගයන් කිහිපයක් පිළිගත හැකි, පහක් පමණක් ඇත. මෙහි එක් එක් කෙටි විස්තරයක් වේ:

• තත්ත්වය උරුම. මෙම ලක්ෂණය ඔබ දෙමාපියෙක් බව අංගයක් තත්වය පිළිබඳ දත්ත පිටපත් කිරීමට ඉඩ දෙයි. උදාහරණයක් ලෙස, ඔබ සාපේක්ෂ නිශ්චිත තත්ත්වය සමඟ div තිබේ නම්, එය බවට IMG උරුම අගය ද සාපේක්ෂ ලෙස සකසා ඇත ඇතුල් වුණා.
• තත්ත්වය ස්ථිතික. මෙම අගය, ස්වයංක්රීයව සියලු මූලද්රව්ය ලබා දී ඇත තවත් ප්රකාශ මිස. කේතය සඳහන් පරිදි තත්වයට මූලද්රව්ය ගැලපෙන හා තමන්ගේ තත්වය වෙනස් කිරීමට ඉඩ සලසමින්, "සාටෝපකාරී" වර්ග සඳහා ලබා ගත හැකි නොවේ.
• තත්ත්වය නිරපේක්ෂ. මෙම අගය මගින් තත්ත්වය දේපල බොහෝ විට එය "පාවෙන" අංගයක් නිර්මාණය කිරීම සඳහා අවශ්ය වන අවස්ථා සඳහා යොදා ගනු ලබයි. දේපල අයිතමය දී ඇති වටිනාකම පිටුවේ අනෙකුත් අංග සඳහා "නොපෙනෙන" වේ. අපගේ පරම අංගයක් නොපවතියි නම්, එනම්, ඔවුන් සංවිධානය කරනු ලැබේ. ඔහු නොසලකා සැමවිටම කොතරම් දුර scrolled කර පිටුවේ, ක්රියාත්මක වනු ඇත.
• ස්ථාවර තත්ත්වය. බොහෝ ක්රම දී, මෙම අගය කෙසේ වෙතත්, පරම අංගයක් මව් බැඳී සිටින අතර, ස්ථාවර බ්රව්සරය තිරයේ ඉහළ වම් කෙළවරෙහි ඇති ඛණ්ඩාංක පමණක්, එය පෙර ඇති වූ අංග ඉතිරි නොසලකා හරිමින් භාවිතා කරයි, පසුගිය එක සමාන වේ.
• අවසාන වශයෙන්, සාපේක්ෂ පිහිටීම. මේ ආකාරයේ අගයන් පොදු "රබර්" කැඳවා සනිටුහන් වූ ශක්තිය අනුවර්තනය හා නිර්මාණය කිරීම සඳහා ප්රයෝජනවත් විය හැකි වන වෙනත් සාපේක්ෂව පිහිටුම් අංගයක් හැක. මෙම දේපළ සමග, අයිතමය අනෙක්, පිටුව මත තම තමන්ගේ තත්වය වෙනස් කිරීමට ඇති හැකියාව අහිමි තොරව "තල්ලු" ඇත.

තත්ත්වය සමඟ වැඩ වෙනස් බ්රවුසර

වෙබ් බ්රව්සර නොවන සමානව අනුකූල වේ. සංජානනය ඕනෑම හිචස් තොරව අන්තර්ජාලය සැරිසරන සඳහා බොහෝ විකල්ප වැඩසටහන් තත්ත්වය වටිනාකම පරම සත්ය වන අතර, "නිදන්ගත විශේෂ» Internet Explorer එහි අනුවාදය මත පදනම්ව, දේපල සලකයි.

උදාහරණයක් ලෙස, මේ වන විටත් වෙබ් බ්රව්සරය IE6 "තැන්පත්" භාවිතා, ඔබ ස්ථාවර අගය භාවිතා කළ නොහැකි අතර උරුම - "බූරුවා" ඔවුන් එය ගණන් නොගෙන. කෙසේ වෙතත්, ආදරණීය උරුම කිරීමට, තත්වය හත්වන සංස්කරණය වැඩි දියුණු කිරීම සඳහා ආරම්භ කර, ස්ථාවර තිබියදීත් දැනටමත් සකසන ලද "වෙනත් බ්රවුසර බාගත කිරීම සඳහා වෙබ් බ්රව්සරය," පමණක් තම අටවන ආත්මභාවය තුළ විය.

නිරීක්ෂකයන්ගේ ඉතිරි සන්සුන්ව මැද භාගයේ 90 ගණන්වල දී ප්රකාශයට පත් පිටපත 4 ගුණ සහාය ලබාගෙන ඇත්තේ එහි පළමු අනුවාදය, ඔපෙරා හැර, සමග තත්ත්වය පාලනය.

කරුණාකර Javascript දී තත්ත්වය සමඟ වැඩ

ඇත්ත වශයෙන්ම, ජාවාස්ක්රිප්ට් තුල තත්ත්වය දේපල සමඟ වැඩ කරන ආකාරය පිළිබඳ කතාව, අපි විනීත වෙනුවෙන් පමණක් ඇතුළත් කර තිබේ ඇත. මෙම දේපල මාතෘකාව ඕනෑම විශේෂ අක්ෂර නැති නිසා, ඔබ යම් වෙනස් නොකර JS භාවිතා කළ හැකි, උදාහරණයක් ලෙස, සාපේක්ෂ ග්රා.නි. තත්ත්වය කිරීම සඳහා, මේ වගේ රේඛාවක් ඇතුළත් විය යුතුය: div.style.position = 'සාපේක්ෂ.

ඔබ දැක ගැනීමට හැකි වන පරිදි, එය ලස්සන සරලයි.

ඇයි සාපේක්ෂ හැකියාවන් විශේෂ අවධානයක් යොමු තත්ත්වය කුමක්ද;

වටිනාකම භාවිතයෙන්, දේපළ වටිනාකම තත්ත්වය බොහෝ මෘදු එය ඉදිරිපත්, අවට අංග මත "ගැටුමෙන්", "ශෛලිය තත්ත්වය: සාපේක්ෂ" අතර අනිසි ලෙස භාවිත කිරීම දැඩි ලෙස "ලේඛයක" තිරය සමස්ත අන්තර්ගතයට බැවින්, හැම විටම, සමස්තයක් ලෙස මුළු පිටුව පිළිබඳ මතක තබා ගත යුතු .

මීට අමතරව, මෙම දේපළ පමණක් ඔබට පහසුවෙන් ස්ථාවර නිර්මාණය අනුවර්තනය පරිවර්තනය කරන, එහි යෙදීම් ස්වයංක්රීයව සියළු අන්තර්ගතය පිටු බලපානු ඇත නිසා හැක. ඉන් පසුව අපි තවමත් මෙම අගය භාවිතා කරමින් උදාහරණ හා වැරදි සලකා කාලයක් ඇති වන අතර, ඔබ ප්රායෝගිකව එහි දැනෙන වැදගත්කම දකිනු ඇත.

විට ඔබට සාපේක්ෂ පිහිටුම් පාවිච්චි කළ යුත්තේ ඇයි?

HTML පිටු සාම්ප්රදායික සැකැස්ම අමතරව, තත්ත්වය සාපේක්ෂ බොහෝ විට රසවත් බලපෑම් විවිධ නිර්මාණය කිරීම සඳහා යොදා ගනී. උදාහරණයක් ලෙස, ඔබ යම් අයිතමයක් ක්රමයෙන් තම භූමිය ඉක්මවා ගිය අතර, ඒ වෙනුවට මත පිටුවේ "පැමිණි" හෝ, අවශ්ය නම්, එය එසේ වන්නේ, ඔබ මේ "උපක්රමය" ක්රියාත්මක මෙම දේපල උදව් විය හැක.

මෙම "උපක්රම" ඔබ යම් විචල්ය අගය චක්රීය වෙනස් වෙනස් කිරීමට ඉඩ ඇති, CSS3 ගුණ හරහා, ඔබ ප්රගතිශීලී පැනවීම ඉලක්ක නම් ක්රියාත්මක ජාවාස්ක්රිප්ට් හරහා, හෝ,.

මීට අමතරව, හැකි සමහර අවස්ථාවලදී "දෙමුහුන්" වටිනාකම් තත්ත්වය සාපේක්ෂ නිර්මාණය කරන්න. CSS, නොවන නමුත් එම අවස්ථාවේ දී තත්ත්වය වගේ දෙයක් සකස් කිරීමට ඔබට අවකාශ ලබා දෙයි: පරම සාපේක්ෂ, නමුත් සමහර උපක්රම භාවිතා කරමින්, එය මේ ප්රතිඵලය ලබා ගැනීමට තවමත් හැකි ය. මෙම ප්රවේශය ඔබ වගේ දෙයක් සංකීර්ණ නිර්මාණය කිරීමට අවශ්ය වූ අවස්ථාවල දී ප්රයෝජනවත් විය හැකි යම් tooltip හෝ උත්පතන මෙනු. උදාහරණ සලකා, එවැනි ව්යුහය පිළිබඳ විස්තරයක් ලබා දෙනු ඇත "දෙමුහුන්."

සාපේක්ෂ ශ්රේණිගත භාවිතා උදාහරණ

තත්ත්වය සාපේක්ෂ - එය ලස්සන සරල, නමුත් ඔබ සිත් බලපෑම් විවිධ ක්රියාත්මක කිරීමට ඉඩ සලසා දෙන නම්යශීලී මෙවලමක්. වැඩකට නැති කේතය සැකිලි ලිවීමට කාලය හා ස්ථානය නෑ ආන්යා නම්, අපි ඔබගේ වෙබ් අඩවිය හෝ විශේෂිත පිටු සැරසීම හැකි කිහිපයක් මුඛ ගණිත ක්රමයක්, ඉදිරිපත්.

ගේ "දුවද්දී" රේඛාව සමඟ ආරම්භ කරමු. ඔබ නිසා තිරයේ ඉතිරි අද්දර "ගමන් කිරීමට" හා සෙමින් දකුණු පැත්තේ එය සඳහා මූලද්රව්යයක් සඳහා අවශ්ය යයි සිතමු. එවන් "යාන්ත්රනයක්" ක්රියාත්මක කිරීමට තත්ත්වය සකස් කළ යුතුය: සාපේක්ෂ; වම්: -100px, කොහෙද -100 - වාරණ පළල සමන්විත පික්සල සංඛ්යාව ආසන්න. මෙම ශෛලිය "වියුක්තයට" තුල පිහිටුවමින්, ඔබ තිරයේ පිටත ඒකකය සැඟවීමට ඉඩ ලබා දෙනු ඇත. දැන් ඔබ එය බ්රවුසරය ඇති වින්ඩෝව පළල ඍණ මූලද්රව්යයේ පළල සමාන වන්නේ නැත තාක් කල් ඒකක දේපල වටිනාකම ඉතිරි සෑම තත්පර කිහිපයක් වැඩි වනු ඇත බව තිර රචනය භාවිතා කළ හැකිය. එහි ප්රතිඵලය වී ඇත්තේ, ඉතිරි අද්දර පිටතට එන ඒකකය, තිරය හරහා පෙරළා ඔහුගේ දකුණු අතේ "නවතා".

තවත් උදාහරණයක් ඔබ "සාපේක්ෂ-පරම" අංග නිර්මාණය කිරීමට ඉඩ දෙයි. උදාහරණයක් ලෙස, ඔබ තත්ත්වය සාපේක්ෂ ඇති තවත් තුල නිරපේක්ෂ ඇතුළු විය හැකිය. එහි ප්රතිඵලයක් ලෙස, අපි නිරපේක්ෂ කොටා තිබේ කිරීමට ඇති ප්රමාණය නැත බව "සාපේක්ෂ" වාරණ ඇති, දැන් පෙර අංගයක් ස්වාධීන තත්වයක ඇතිවන්නට කිරීමට සමත් ය.

සාමාන්ය වැරදි තත්ත්වය සාපේක්ෂ භාවිතා කරන විට

වඩාත් පොදු වරදක් තත්වය සාපේක්ෂ භාවිතා කරන විට බොහෝ වෙබ් නිර්මාණකරුවන් ඕනෑම තැනක පිහිටා කළ හැකි ඒකකය, ස්ථානයක් වෙන් කර ගැනීමට ඇති හැකියාව ගැන අමතක බව ය. උදාහරණයක් ලෙස, ඔබ තරමක් විශාල නම්, තිරයේ පිටත සහ සාපේක්ෂ පිහිටුම් සහිත තබා, එහි තැන දී gaping "කුහරය" වනු ඇත. කෙසේ වෙතත්, මෙම දේපළ පවා ඇතැම් විට එය යම් අපහසුතාවලට එහි කොටස් සියලු ඉහළ තත්වයක ක්රමයෙන් තැන්පත් කර ඇති වෙබ් අඩවිය, ක "ස්වයං-එකලස්" පිළිබඳ ඉතා රසවත් ක්රියාත්මක නිර්මාණය, උදාහරණයක් ලෙස, හොඳ සඳහා භාවිතා කළ හැකි නිර්මාණය: 0; වමේ: 0; ටී. ඊ. එහි මුල් ස්ථානය.