සීඑස්එස් ස්ථානගත කිරීම Just X, Y Coordinates වඩා වැඩි ය
CSS පිහිටීම දිගුකාලීනව වෙබ් අඩවි නිර්මාණය කිරීම සඳහා වැදගත් අංගයකි. Flexbox සහ CSS Grid වැනි නවීන CSS ආකෘති ශිල්ප ක්රම නැගීමත් සමඟ ස්ථානගත කිරීම තවමත් ඕනෑම වෙබ් නිර්මාණ නිර්මාණකරුවකුගේ උපක්රමවල වැදගත් ස්ථානයකි.
CSS ස්ථානගත කිරීම භාවිතා කරන විට, ඔබ විසින් කළ යුතු පළමු දේ වනුයේ ඔබ ලබා දෙන මූලද්රව්යය සඳහා නිරපේක්ෂ හෝ සාපේක්ෂ පිහිටුම් භාවිතා කිරීමට යන්නේ නම්, බ්රවුසරයට පැවසීමට ස්ථානය සඳහා CSS දේපල ස්ථාපනය කිරීමය. මෙම ස්ථානගත කිරීමේ ගුණයන් අතර වෙනස පැහැදිලිව අවබෝධ කර ගත යුතුය.
නිරපේක්ෂ හා සාපේක්ෂ වශයෙන් වෙබ් නිර්මාණකරණයේ බොහෝ දුරට CSS පිහිටුම් ගුණාංග දෙකක් වන අතර, සැබවින්ම ප්රාන්ත 4 ක් සහිත දේපල වලට ඇත:
- ස්ථිතිකයි
- නිරපේක්ෂ
- ඥාතියෙකි
- ස්ථාවරයි
ස්ථිතික යනු වෙබ් පිටුවක කිසියම් අංගයක් සඳහා ප්රකෘති තත්වයකි. මූලද්රව්යයේ තත්ත්වය නිර්ණය නොකරන්නේ නම්, එය ස්ථිතික වේ. මෙයින් අදහස් වන්නේ එය HTML ලේඛනයේ කොතැනද පදනම්ව තිරය මත දර්ශණය වන අතර එය එම ලේඛනයේ සාමාන්ය ප්රවාහය තුළ පෙන්වන ආකාරයයි.
ඔබ ස්ථිතික ආස්ථානයක් සහිත මූලද්රව්යයක් ඉහළ හෝ වම් වැනි ස්ථානගත කිරීමේ නීති යෙදී ඇත්නම්, එම රීතීන් නොසලකා හරින අතර සාමාන්ය ලේඛන ප්රවාහය තුළ එහි මූලද්රව්යය පවතිනු ඇත. සත්ය වශයෙන්ම, ඔබ කවදාවත් නම්, කලාතුරකිනි, CSS හි ස්ථිතික තත්ත්වයට මූලද්රව්යයක් සැකසීමට අවශ්ය වන්නේ පෙරනිමි අගයකි.
Absolute CSS ස්ථානකරණය
නිරපේක්ෂ ස්ථානගත කිරීම සමහරවිට තේරුම් ගැනීමට පහසුම CSS පිහිටීම විය හැකිය. ඔබ මෙම CSS පිහිටුම් දේපල ආරම්භ කර:
පිහිටීම: නිරපේක්ෂමෙම අගයට අනුව ස්ථානගත කරන ඕනෑම දෙයක් සාමාන්ය ලේඛනයේ සාමාන්ය ප්රවාහයෙන් ඉවත් කළ යුතු අතර, එම පිටුවෙහි නිශ්චිත ස්ථානයක තබා ඇත. මෙම මූලද්රව්යයේ සමීපතම නොවන ස්ථිතික නොවන මුතුන් මිත්තන් මත පදනම්ව ගණනය කෙරේ.
නිසි ලෙස ස්ථානගත වූ මූලද්රව්යය සම්මත ප්රවාහයෙන් ඉවත් කර ඇති බැවින්, එයට පෙර මූලද්රව්යයන් හෝ ඊට පසුව HTML වෙබ් අඩවියේ ස්ථානගත කර ඇති ආකාරය එය බලපාන්නේ නැත.
උදාහරණයක් ලෙස - ඔබ සාපේක්ෂතාවයේ අගය අනුව භාවිතා කරන ලද බෙදීම් ඇති නම් (අපි මෙම අගය දෙස කෙටියෙන් සලකා බලනු ඇත), එම අංශය තුළ ඔබ අංශකයේ ඉහළින් සිට පික්සල් 50 ක් ස්ථානගත කිරීමට අවශ්ය වූ ඡේදයක් තිබිය යුතුය එම අගයට "නිරපේක්ෂ" ස්ථානයේ වටිනාකමක් එකතු කරන අතර, "top" දේපලෙහි 50px හි සංක්රාමීය අගය සහිතව.
පිහිටීම: නිරපේක්ෂ ඉහළ: 50px;මෙම නිරපේක්ෂ වශයෙන් ස්ථානගත කළ මූලද්රව්යය එම සාපේක්ෂ වශයෙන් ස්ථානගත කළ බෙදීම්වල ඉහළින් සිට පික්සල් 50 ක් නිරූපණය වන අතර එය සාමාන්ය ප්රවාහයක දක්නට ලැබේ. ඔබේ "සම්පූර්ණයෙන්ම" ස්ථානගත වූ මූලද්රව්යය සාපේක්ෂව ස්ථානගත කරන ලද එහි එහි සන්දර්භය භාවිතා කළ අතර ඔබ භාවිතා කරන ස්ථානීය අගය එය සාපේක්ෂව ය.
ඔබට භාවිත කිරීමට තිබෙන ස්ථාන හතරේ ඇති ගුණාංග වන්නේ:
- ඉහල
- හරි
- පතුලේ
- වමට
ඔබට ඉහලින් හෝ පහළින් භාවිතා කළ හැකිය (මෙම අගයන් දෙකෙහිම අගයක් ලෙස ස්ථානගත කළ නොහැකි බැවින්) හෝ හරි හෝ වම හෝ
කිසියම් අංගයක් නිරපේක්ෂක තත්වයට පත් වුව හොත්, එය එහි ස්ථිතික නොවන මුතුන්මිත්තන් නොමැත, එය පිටුවෙහි ඉහළම මට්ටමේ මූලද්රව්යය වන සිරස් මූලද්රව්යයට සාපේක්ෂව ස්ථානගත කරනු ලැබේ.
සාපේක්ෂ ස්ථානගතකරණය
අපි දැනටමත් සාපේක්ෂ ස්ථානගත කිරීම් ගැන සඳහන් කර ඇත්තෙමු. එබැවින් එම දේපළ දෙස බලමු.
සාපේක්ෂ ස්ථානගත කිරීම නිරපේක්ෂ ස්ථානගත කිරීම ලෙස එකම ස්ථාන හතරේම ස්ථානගත කිරීම් භාවිතා කරයි, නමුත් එහි සමීපතම නොවන ස්ථිතික නොවූ මුතුන් මිත්තන් මත මූලද්රව්යය පිහිටීම වෙනුවට එය සාමාන්ය ප්රවාහයේ නම් එය මූලද්රව්යය විය හැකි ස්ථානයෙන් ආරම්භ වේ.
නිදසුනක් ලෙස, ඔබ ඔබේ වෙබ් පිටුවක කොටස් තුනක් තිබේ නම්, සහ තුන්වන ස්ථානයේ ඇති "ස්ථානය: සාපේක්ෂ" විලාසය, එය එහි වර්තමාන ස්ථානය මත පදනම්ව ස්ථානගත කරනු ලැබේ.
ඡේද 1.
2 වෙනි ඡේදය.
ඡේද 3.
ඉහත උදාහරණයේ, තෙවන ඡේදය කන්ටේනර් මූලද්රව්යයේ වම් පැත්තෙන් 2 ක් ස්ථානගත කරනු ඇත, නමුත් තවමත් පළමු ඡේද දෙක පහතින් වනු ඇත. එය ලේඛනයේ සාමාන්ය ප්රවාහයේ පවතිනු ඇති අතර, එය ටිකක් අඩු කළ යුතුය. ඔබ එය ස්ථානගත කළ විට: නිරපේක්ෂ; එය අනුගමනය කළ ඕනෑම දෙයක් එය ඉහළින් ප්රදර්ශනය වනු ඇත, එය තවදුරටත් ලේඛනයේ සාමාන්ය ප්රවාහය තුළ නොපවතිනු ඇත.
වෙබ් පිටුවක මූලද්රව්ය බොහෝ විට ස්ථානීය අගයක් සැකසීමට භාවිතා කරයි: සාපේක්ෂව සංචිත අගයක් නොමැතිව සාපේක්ෂව, සාමාන්යයෙන් ප්රවාහයේ දිස්වන හරියටම එහි මූලද්රව්යය පවතී. මෙම මූලද්රව්යය, මූලද්රව්යය අනිකුත් අංගයන් සම්පූර්ණයෙන්ම ස්ථාවරව තබා ගත හැකි සන්දර්භයක් ලෙස ස්ථාපිත කිරීම සඳහාම සිදු කෙරේ. නිදසුනක් ලෙස, ඔබ ඔබේ සමස්ත වෙබ් අඩවියට "බහාලුම්" (Classical Value) අඩංගු පන්ති බෙහෙතක් තිබේ නම් (එය වෙබ් නිර්මාණකරණයෙහි ඉතාම සරළ අවස්ථාවක්) නම්, එම අංශයට සාපේක්ෂව යම් ස්ථානයක සිටීමට හැකි වන පරිදි එය ඇතුළේ ඕනෑම දෙයක් භාවිතා කළ හැකිය. එය ස්ථානගත කිරීමේ සන්දර්භයක් ලෙස.
ස්ථාවර ස්ථානකරණය පිළිබඳ කුමක් ද?
ස්ථාවර ස්ථානගත කිරීම නිරපේක්ෂ ස්ථානගත කිරීම වැනි බොහෝ දේ ඇත. මූලද්රව්යයේ පිහිටීම නිරපේක්ෂ ආකෘතියට සමානුපාතිකව ගණනය කරනු ලැබුවද, නමුත් ස්ථිති මූලද්රව්යයන් එම ස්ථානයේම ස්ථාවර කර ඇත. එය ජලීය සලකුණක් මෙන් ම ය. එම පිටුවෙහි අනෙක් සියල්ලම එම මූලද්රව්යය පසුකර යවනු ලැබේ.
මෙම ගුණාංග අගය භාවිතා කිරීම සඳහා ඔබ විසින් සැකසූ:
ස්ථානය: ස්ථාවර;ඔබේ වෙබ් අඩවියේ ස්ථානයක් තැනූ විට, ඔබේ වෙබ් පිටුව මුද්රණය කරන විට එම ස්ථානය මුද්රණය කරනු ඇත. උදාහරණයක් ලෙස, ඔබගේ අංගයේ ඉහළම පිටුව ස්ථීර කර ඇත්නම්, සෑම මුද්රිත පිටුවක මුදුනෙහිම එය දිස්වනු ඇත - එය පිටුව ඉහළට ස්ථාවර වන නිසාය. මුද්රිත පිටු ස්ථාවර අංග පෙන්වන ආකාරය වෙනස් කිරීමට මාධ්ය වර්ග භාවිතා කළ හැකිය:
@media තිරය {h1 # පළමු {ස්ථානය: ස්ථාවර; }} @media print {h1 # first {position: static; }}ජෙනිෆර් ක්රිනින්ගේ මුල් ලිපියක්. ජේම්මි ජිරාඩ් විසින් 1/7/16 දින සංස්කරණය කරන ලදී.