CSS z-දර්ශක: දළ විශ්ලේෂණයක්, ගුණ

පාලනය CSS z-දර්ශක - පිටුව අංගයක් තත්ත්වය සම්බන්ධීකරණය Z: එය පිහිටා ඇති ප්රදර්ශන අංගයක් හෝ ස්ථරය මට්ටම. වැඩි z-දර්ශක ඇති බව ටැගය පූර්ණ දිස් වේ. ටැග් ඔවුන් ලැබෙන ප්රවාහ සහ ලැප් පෙනී පිළිවෙළ ප්රදර්ශනය කර ඇත. приоритет видимости. Z-දර්ශක අගය පූර්වංගම ප්රමුඛත්වය තීරණය කරයි.

අපි නවීන බ්රවුසරයන් හා ගණිත ක්රමයක් ප්රදර්ශනය අංග පුද කළ යුතුය. රූප සහ කවුළුව දී මූලද්රව්යවල ප්රශ්නය පෙනෙන මෙන්ම නොපෙනෙන කොටස් සිඳුම් අග පිහිටුවා අල්ලා තිර, දෘශ්ය සංදර්ශකය තාක්ෂණය අන්තර්ගත විශිෂ්ට ප්රතිඵල ළඟා වී ඇත විට. දින සිට බ්රවුසරයක් කවුළුව තුළ, සියලු අංග නිවැරදිව දිස් වේ, පරිශීලක සැලසුම් හෝ සංවර්ධක නියම කර දේ පමණක් දකින.

පොදු නීතිය: අනුපිළිවෙල හා මට්ටම

ආදාන ධාරාව (පිටුව පිහිටුවා සේවාදායකයේ) අනුපිලිවෙලට බ්රව්සරය කියවනවා. සියලු ටැග් තැටියක CSS නීති රීති වලට අනුව ප්රදර්ශනය කර ඇති අතර ඒවායෙහි හැක.

මෙම උදාහරණය හතර දෘශ්යමාන අංගයක් විස්තර කරයි. සෑම අනුයාත පෙර එක් ගැටේ. ටැග්ස් එගොඩ සිටින ස්ථාන දී ප්රමුඛත්වය පිළිබඳ ප්රශ්නයක් තිබෙනවා. මේ සියලු ම හා 848 සමාන සඳහා නීතියක් z-දර්ශක CSS ටැග් ලෙස, එය පහත පරිදි එහා යන අංගය පැහැදිලි වනු ඇත. පැහැදිලිවම, ඊළඟ අංගය එක් එක් යටතේ සිට peeks සියලු.

පාලනය සැඟවීම්

වෙබ් බ්රව්සර සැඟවීම් පමණක් "සාධාරණ" නීති පිළිපදින්න. ඔබ සියලු දළ පැනවීම විශ්ලේෂණය සහ එක් එක් අනුයාත මූලද්රව්ය මගින් අවශෝෂණය කරන එම ප්රදේශ හැර, ඇත්තටම ඡේදනය බව එම පමණක් භාවිතා කිරීමට සලස්වයි ඇල්ගොරිතමයක් ඉදිරිපත් කිරීමට - ඉතා දුෂ්කර වී ඇත.

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

එම මූලද්රව්යය අරාවක් මත බලපෑම

තුන්වන ටැගය scCSS3 එය සෑහේ ඉසෙඞ් දර්ශකය වැඩි, සහ scCSS4 දී - එය අඩු කිරීම සඳහා, සමස්ත චිත්රය වෙනස් කර ඇත. මෙම අංශයෙන් අංග අනුක්රමය එකම වේ:

• id= 'scCSS1'; div id = 'scCSS1';
• id= 'scCSS2'; div id = 'scCSS2';
• id= 'scCSS3'; div id = 'scCSS3';
• id= 'scCSS4'. div id = 'scCSS4.

එය දෙවන ඡායාරූපයේ ඇත්තටම එය පෙනේ වඩා වැඩි ඉඩක් ගනී බව සඳහන් කළ යුතු ය. තුන්වන චිත්රයක් හා සමාන වේ. තවද, එක් එක් අනෙකුත් දුරින් සිට කොටස් දෙකකින් (බිත්තර දෙකක්) වලින් සමන්විත වේ.

දෙවැනි හා තෙවැනි රූප අයිති වන ප්රදේශ, සත්ය ප්රමාණය පිළිවෙළින්, කහ සහ අළු පැහැයෙන් ඉස්මතු කර ඇත.

පසුබිම වර්ණ කිරීමට z-දර්ශක වල සංයෝජනයක්

එය CSS පසුබිම සහ z-දර්ශකයේ ගුණ එකිනෙකා පරිපූර්ණත්වයට බව සඳහන් කළ යුතු ය. සියලු බ්ලොක් මට්ටමේ අංග, සහ වෙනත් ඕනෑම, හැම විටම උපරිම උස හා අන්තර්ගතය උපරිම පළල විසින් පිහිටුවන ලද හතරැස් ප්රදේශයේ අල්ලා ගනී.

පිළිබිඹුවන් භාවිතා කරමින්, ඔබට ඕනෑම පෝරම ක්ෂේත්රය අංගයක් බවට පත් කළ හැකිය, නමුත් ඔහු වටා එහි සෑම විටම සෘජුකෝණාස්රය වනු ඇත. එය නිසි ලෙස සැලකිල්ලට ගැනීම වැදගත් වන බව සත්යයකි.

ඔබ ලොගින් වන්න තෝරා හැඩය මත පාඨමය තැබිය හැකි, නමුත් ඔබ එසේ නම්, අන්තර්ගතය හතරැස් කොටුව තුළ මූලද්රව්යයන්, අනුක්රමයෙන්, ආදාන ලැබීම මත ලැබෙන.

කාගේ පසුබිම වර්ණ අගය (විනිවිද කාරුණික) කිරීම යනු විනිවිද භාවයෙන්, ඕනෑම පරිපථ අංගයක් අනුකරණය කළ හැකි අංගයක් ගුණ CSS z-දර්ශක භාවිතා කරන්න. යථාර්ථය අංගයක් ඕනෑම අවස්ථාවක වුවද හතරැස් වේ.

සිදුවීම් හා දෘශ්ය අංග

එම මූලද්රව්යය තවත් අංගයක් විසින් අවහිර කර ඇත ස්ථානවල, සිදුවීම් එය ක්රියා නොකරනු ඇත. සාමාන්ය රීතියක් වශයෙන්, අයිතමය නොපෙනී නම්, ඔහු ද ලබා ගත හැකි කලාපය වේ.

නිර්මාණකරුවෙකු බොත්තම හෝ මෙනු අයිතමයක් ලොක් කිරීමට අවශ්ය නම්, එය හොඳින් අගුළු ටැගය පුරා තවත් ටැගය, සමහර විට විනිවිද පෙනෙන (උදා: CSS පාරාන්ධතාව පාලනය භාවිතා), නමුත් ඕනෑම අවස්ථාවක, ඉහළ CSS z-දර්ශක සහිත තැබිය හැකිය.

මෙම අවස්ථාවට බැවින්, මතය පරිශීලක ස්ථානයේ සිට, පසුගිය පසුව, අදාළ බෙදිය හැකි අතර ඕනෑම නැහැ (ගමන් මූසිකය, යතුරු පුවරුව මත අහඹු බොත්තම් එබීම, එම තත්ත්වය ඇති සේ සංඥා) ප්රමාණවත් බ්රවුසරය ඇති වින්ඩෝව තුල අන්තර්ගතය වෙනස් කිරීමට භාවිතා කළ හැක.

සරල උදාහරණයක්: ආගන්තුක ගමන් කර තිබේ මුසික මෙනු අයිතමය මත, නමුත් තවමත් යමක් කිරීමට තීරණය කර නැත. සංවර්ධක අපේක්ෂිත ලක්ෂ්යය වෙත සංවාදයක් ව්යාපාරය නිරීක්ෂණය කිරීමට සිද්ධියක් සැපයිය හැකි (ක්ලික් කරන්න - අමුත්තෙක් තීරණය) සහ ප්රමාණවත් අන්තර්ගතයට ප්රදර්ශනය. පාලනය CSS z-දර්ශක මෙම අවස්ථාව වෙනුවෙන් හොඳම සුදුසු වේ.

රූප ආකෘතිය

රූප කිසිදු වෙබ් අඩවිය සඳහා වැදගත් ගොඩනැගිලි ද්රව්ය වන නිසා (සුන්දරත්වය, නූතනත්වය, ක්රියාකාරිත්වය - දේවල් සාමාන්ය සම්මතය), එය ප්රතිරූපය ආකෘතිය තෝරා ගැනීම් සඳහා විශාල වැදගත් වේ.

පොදුවේ ගත් කල, ඔබ දැනට පවතින ආකෘති සියලු විවිධ භාවිතා කළ හැකිය, නමුත් ප්රායෝගික හා කාර්යක්ෂමතාව අනුව * ස්ථිතික රූප සහ * .gif සඳහා .png සීමා කර සාධාරණ වේ - සජීවිකරණ පින්තූර සඳහා. ජනප්රිය * .jpg හොඳ, නමුත් එය නම්යශීලී ප්රදර්ශනය අවකාශය හැසිරවීමට ඉඩ දෙන්නේ නැහැ.

බ්රව්සරය දෝෂ සහ සංවර්ධක

එසේ වන්නේ නැත බොහෝ විට මෙම නඩුව, තැටියක CSS z-දර්ශක වැඩ කරන්නේ නැහැ විට, නමුත් එය සිදු වේ. කඩා හැලෙන යෙදා කොන්දේසි සෑම විටම වැඩ, සහ අකාරයේ පරිමාව බොහෝ විට සැලකිය යුතු වෙළුම් ළඟා. යමක් ප්රදර්ශනය විට නැත, හෝ හුදෙක් කල යුතු දේ නැහැ, පළමු ඔබේ ම කේතය, එසේ නම් ඔබගේ බ්රවුසරයේ කෑෂය ඉවත් කර නැවත ඔබේ ම කේතය පරීක්ෂා පරීක්ෂා කළ යුතුය.

HTML හා CSS අර්ථ කථනය, බ්රව්සරය පාහේ අතින් වැරදි සිදු නොවේ ඇත - එය සිද්ධාන්තයක් වන්නේ. අපේක්ෂිත අයිතමය නිර්මාණය, එසේ නම්, නැති නම් CSS {තත්ත්වය: පරම, z-දර්ශක: 112233; වමේ: 10px; ඉහළ: 20px; } ... එතැනම ය හෝ වාර්තා නොවේ.

වඩාත් පොදු වරදක් - වැරදි දැක්වෙන්නේ අංගයක් පරම හෝ සාපේක්ෂ පිහිටීම මත එහි නැරඹුම් සැඳහුම අතුරුදහන් කර ඇත. සමහර විට එය කොටස් කෙරෙහි සෘජුවම ශෛලිය නියම කිරීමට වැඩ කිරීමට හා ඔහුගේ ශෛලිය නොවේ හැක. අග දී, එය ක්රමයක් වේ, නමුත් එය මූලික වශයෙන් කේතය දෝෂ යම් ආකාරයක ගැන කතා කර ඇත.

ශෛලිය පන්ති හෝ ID ශෛලිය තුල විය යුතුය. පමණක් විශේෂ අවස්ථාවන්හි දී කළ යුතු කොටස් කෙරෙහි බවද පෙන්වා ශෛලිය.

පන්ති හෝ හඳුනාගැනීමේ යෙදිය නොවේ නම් jQuery.css (z-දර්ශක, 123) භාවිතා කරමින් ද, දෝෂයක් ඇති විය හැක. මීට අමතරව, jQuery - ඇත්තටම සැලකිය සංවර්ධන මෙවලමක්. කෙසේ වෙතත්, ඔබ එය අදාළ පෙර, හිතන්න හානියක් නොවෙයි: එය වැඩි දියුණු කරන ලද අතහැර හැකි ය යන්නයි HTML / CSS, z-දර්ශක - ක්ෂණික අවධානය යොමු කරන්නේ අවශ්ය නොවන බව පාලනය නොවේ.

තාර්කික ස්ථරයන් නිවැරදි ව්යාපාරය, හා

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

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

ඒ වගේ හෝ නොවන, ඇත්ත නිවැරදි, අනාගතය පෙන්නුම් කරනු ඇත. එය පමණක් නොව ස්ථර අන්තර්ගතය තුළ තීන්ත ආලේප, පමණක් නොව, වෙබ් අඩවිය ගොඩනැගීමේ ඕනෑම ප්රභේද්යයක් දී ඔවුන් අතර නිසි ව්යාපාරය සහතික කිරීමට තේරුමක් ඇති වැදගත් වේ.

විශිෂ්ට විසඳුම - සියල්ලන්ටම AJAX (අවශ්ය පරිදි පිටුව යාවත්කාලීන ඇත). ඊටත් වඩා බලාපොරොත්තු විසඳුමක් පිටුව එය බ්රවුසරය ඇති වින්ඩෝව මෙම අවස්ථාවේදී අවශ්ය බව පෙන්වන විට,.

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

සාමාන්යයෙන්, නිර්මාණකරුවෙකු වූ ප්රියතම අංකය තෝරා, සහ පේලියට සියලු ටැග් එය ලබා දෙන අතර, අප කෙසේ හෝ නැගී ඇති බව, ඊළඟ අංකය පවරයි. පිටු කොටස් හා මට්ටම් වැදගත්කම අමුණන්න - විශේෂයෙන් ප්රගතිශීලී හා බලාපොරොත්තු සහගත පුරුදු නැත.

කෙසේ වෙතත්, නරඹන්නන් සමඟ සංවාදයක් සඳහා පියවර semantics z-දර්ශක නම්, එය කළ හැකි ප්රායෝගික බලපෑමක් නිර්මාණය කිරීම වේ. ටැග් එකිනෙකා මත අතුරන කළ හැකි ආකාරය හා සමාන, එය සංවාදයක් (අඩවි නරඹන්නන්) පැනවීමට හා ඒවා අතර ව්යාපාරය ඉටු කිරීමට හැකි ය. මෙම ඉදිරිදර්ශනය සිට, CSS z-දර්ශකයේ නීති අයදුම්පත් ඉතා ශක්ය හා ප්රායෝගික බව පෙනේ.