Back to Question Center
0

أتوز كس سكرينكاست: Z كس إندكس أتوز كس سكرينكاست: الفهرس كس الفهرس المواضيع ذات الصلة: قماش & أمب؛ سفغانيماتيونبوتسترابتموديو & أمب؛ Semalt

1 answers:
أتوز كس سكرينكاست: الفهرس Z كس الملكية

تحميل المشغل .

هذا سكرينكست هو جزء من أتوز كس سلسلة لدينا. يمكنك العثور على إدخالات أخرى لسلسلة هنا.

نص

بعض التصاميم واجهة قد تدعو العناصر لتكون الطبقات أو مكدسة فوق بعضها البعض.

وهناك العديد من الطرق التي العناصر كومة بطبيعة الحال على رأس كل منهما الآخر. ولكن يمكننا التحكم في هذا الأمر التراص باستخدام مجموعة من موقف </code> و <code> خصائص z </code> خصائص. </p><p> في هذه الحلقة الأخيرة من أتوز كس الموسم واحد سوف نتعلم عن: </p><ul><li> أمر التراص الافتراضي للوثيقة </li><li> ما هو سياق التراص وكيف تتفاعل مع بعضها البعض </li><li> كيف يعمل <code> فهرس z </code> على ترتيب الطبقات داخل سياقات التراص </li><li> وطريقة استخدمها لتوحيد <code> مؤشر z </code> عبر مشروع </li></ul><h3> الافتراضي التراص </h3><p> عند كتابة هتمل لدينا، العناصر التي تظهر أسفل أسفل في المستند، كومة بشكل طبيعي فوق عناصر أبعد من ذلك. </p><pre> <code class="language-markup"> <بودي><هيدر كلاس = "سيت-هيدر"> </ هيدر><مين كلاس = "سيت-كونتنت"> </ مين><فوتر كلاس = "سيت-فوتر"> </ فوتر></ بودي> </code> </pre><p> وبالنظر إلى هذا المقتطف من هتمل، فإن التذييل <code> </code> سوف يكدس فوق منطقة المحتوى الرئيسية التي ستكدس فوق رأس <code> </code> إذا كانت كلها في وضع لتتداخل مع بعضها البعض. </p><p> يمكن أن تتداخل العناصر باستخدام خليط من <code> موقع </code> خصائص وخصائص تخالف <code> أعلى </code> و <code> يمين </code> و <code> قاع </code> و <code> اليسار </code>. </p><p> إذا قمت بتعيين <code> موقف: المطلق </code> على كل من هذه العناصر، وسوف جميع تخطيط فوق بعضها البعض. ويأتي تذييل <code> </code> آخر في الوثيقة وذلك عن طريق مداخن الافتراضية على رأس العنصرين السابقين. </p><pre> <code class="language-css">. رأس-الموقع،. محتوى الموقع،. سيت-فوتر {موقف: المطلق؛ويدث: 400px؛بادينغ: 20px؛}. سيت-هيدر {توب: 0؛ ليفت: 0؛}. سيت-كونتنت {توب: 50px؛ ليفت: 50px؛}. سيت-فوتر {توب: 100px؛ ليفت: 100px؛} </code> </pre><p> إذا كنت تستخدم خصائص الإزاحة، <code> أعلى </code> و <code> اليسار </code>، يمكننا أن نرى النظام أكثر وضوحا. </p><h3> سياق التراص </h3><p> في حين أن استخدام <code> موقف: المطلق </code> مما يخلق عناصر تتداخل بعضها البعض، لم نخلق بعد ما يعرف باسم <em> سياق التراص </em>. </p><p> يتم إنشاء سياق التراص بأي من الطرق التالية: </p><ul><li> عنصر <code> مطلق </code> أو <code> نسبي </code> و <code> قيمة z </code> قيمة ليست <code> ذاتي </code></li><li> فليكسبوكس البند مع <code> z- مؤشر </code> القيمة التي ليست <code> السيارات </code></li><li> عنصر مع <code> التعتيم </code> أقل من 1 </li><li> عنصر مع <code> تحويل </code> إلى أي شيء آخر غير <code> لا يوجد </code></li></ul><p> إلى حد بعيد الطريقة الأكثر شيوعا لخلق واستخدام سياق التراص هو المثال الأول في هذه القائمة لذلك دعونا نركز على ذلك لمدة دقيقة. </p><p> بالعودة إلى المثال السابق، لدينا ثلاثة عناصر موضوعة فوق بعضها البعض ولكن في الوقت الحالي، ليس لديها قيمة <code> z-إندكس </code>. </p><p> خاصية <code> z-إندكس </code> تسمح لنا بالتحكم في ترتيب التراص. </p><code> z-إندكس: 2 </code> على <code> رئيسي </code> و <code> z-إندكس: 1 </code> على التذييل <code> </code> ) z-إندكس: 3 </code> على رأس <code> </code>، يمكن عكس ترتيب المكدس الافتراضي تماما. </p><p> هذا يبدو بسيطا جدا على السطح. وكلما ارتفع مؤشر (z) <code> z </code> أعلى مداخن العنصر - لذلك يكون <code> z الفهرس: 9999 </code> دائما على رأس <code> Z- الفهرس: 9 </code>. لسوء الحظ، انها أكثر تعقيدا قليلا من ذلك. </p><pre> <code class="language-css">. صندوق {موقف: المطلق؛بوتوم: -25px؛رايت: -25px؛z-إندكس: 4؛ / * لن يعمل :( * /ويدث: 75px؛هيت: 75px؛بوردر: 1px سوليد # 000؛}. سيت-هيدر {توب: 0؛ ليفت: 0؛ z-إندكس: -1؛}. سيت-كونتنت {توب: 50px؛ ليفت: 50px؛}. سيت-فوتر {توب: 100px؛ ليفت: 100px؛ z-إندكس: 3؛} </code> </pre><p> بناء على معرفتنا ب <code> فهرس z </code>، قد نعتقد أنه لجعل هذا المربع الأصفر يظهر فوق المربع الوردي، يمكننا فقط تعيين قيمة أعلى ل <code> مؤشر z </code> . </p><p> إذا قمت بتعيين <code> z-إندكس: 4 </code>، وهو أعلى من <code> z-إندكس: 3 </code> لا نرى أي تغيير. من الشائع أن يحاول الناس إجبار التراص عن طريق محاولة عدد ضخم حقا مثل <code> 9999 </code> ولكن القيام بذلك ليس له أي تأثير سواء. رؤية <code> ض الفهرس </code> قيم مثل هذا تخللت في جميع أنحاء كودباس هو قليلا من رائحة رمز حاول ذلك وتجنب ذلك إذا كنت تستطيع. </p><p> السبب في أننا غير قادرين على الحصول على النتيجة المرجوة من المربع الأصفر على رأس المربع الوردي ويرجع ذلك إلى كيفية <code> z مؤشر </code> يتصرف ضمن سياق التراص. </p><p> من أجل إثبات ذلك، دعونا ننظر إلى مثال أكثر قليلا المشاركة التي سيمالت اقترضت من موقع ويب مدن. </p><pre> <code class="language-markup"> <هيدر كلاس = "سيت-هيدر بلو"><h1> تحليل رأس </ H1><code> الموضع: نسبي؛ <br/>z-إندكس: 5؛ </code></ رأس><مين كلاس = "سيت-كونتنت بينك"><ديف كلاس = "box1 يلو"><h1> مربع المحتوى 1 </ h1><code> الموضع: نسبي؛ <br/>z-إندكس: 6؛ </code></div><h1> المحتوى الرئيسي </ h1><code> الموقف: مطلق؛ <br/>z-إندكس: 4؛ </code><ديف كلاس = "box2 يلو"><h1> مربع المحتوى 2 </ h1><code> الموضع: نسبي؛ <br/>z-إندكس: 1؛ </code></div><ديف كلاس = "box3 يلو"><h1> مربع المحتوى 3 </ h1><code> الموقف: مطلق؛ <br/>z-إندكس: 3؛ </code></div></ الرئيسية><فوتر كلاس = "سيت-فوتر غرين"><H1> تذييل </ H1><code> الموضع: نسبي؛ <br/>z-إندكس: 2؛ </code></ فوتر> </code> </pre><pre> <code class="language-css">. بلو {باكغروند: هسلا (190،81٪، 67٪، 0. 8)؛ كولور: # 1c1c1c؛}. بيربل {باكغروند: هسلا (261،100٪، 75٪، 0. 8)؛}. غرين {باكغروند: هسلا (84،76٪، 53٪، 0. 8)؛ كولور: # 1c1c1c؛}. أصفر {باكغروند: هسلا (61،59٪، 66٪، 0. 8)؛ كولور: # 1c1c1c؛}. بينك {باكغروند: هسلا (329،58٪، 52٪، 0. 8)؛}هيدر، فوتر، مين، ديف {الموقف: النسبي؛بوردر: 1px داشد # 000؛}h1 {فونت: إنرييت؛فونت-ويت: بولد؛}. رأس-الموقع،. سيت-فوتر {بادينغ: 10px؛}. سيت-هيدر {z-إندكس: 5؛توب: -30px؛مارجين-بوتوم: 210px؛}. سيت-فوتر {z-إندكس: 2؛}. سيت-كونتنت {z-إندكس: 4؛أوباسيتي: 1؛موقف: المطلق؛توب: 40px؛ليفت: 180px؛ويدث: 330px؛بادينغ: 40px 20px 20px؛}. box1 {z-إندكس: 6؛مارجين-بوتوم: 15px؛بادينغ: 25px 10px 5px؛}. box2 {z-إندكس: 1؛ويدث: 400px؛مارجين-توب: 15px؛بادينغ: 5px 10px؛}. box3 {z-إندكس: 3؛موقف: المطلق؛توب: 20px؛ليفت: 180px؛ويدث: 150px؛هيت: 250px؛بادينغ-توب: 125px؛تكست-ألين: سينتر؛} </code> </pre><p> هنا يوجد لدينا <code> رأس </code> و <code> تذييل </code> و <code> حاوية رئيسية </code> <code> محتوى </code> كما كان من قبل ولكن داخل <code> 26) لدينا ثلاثة صناديق التي تم وضع كل شيء وأعطى <code> مؤشر z </code>. </p><p> دعونا ننظر إلى الحاويات الأولية الثلاثة أولا - رأس <code> </code>، <code> تذييل </code> و <code> الرئيسي </code>. </p><code> و <code> رأس </code> يحتوي على <code> فهرس z </code> من 5 لذلك يبدو مكدسة فوق <code> الرئيسي </code> <code> المحتوى </code> الذي يحتوي على <code> : 4 </code>. و <code> تذييل </code> يحتوي على <code> مؤشر Z </code> من 2 حتى يظهر أدناه <code> الرئيسية </code> مع أعلى <code> Z مؤشر </code> من 4. كل خير بعيدا؟ جيد. </p><p> أشياء الحصول على مربكة قليلا مع الصناديق الثلاثة داخل <code> الرئيسي </code> حاوية. </p><p> محتوى مربع 2 يحتوي على <code> مؤشر z </code> من 1 ولكن يظهر فوق <code> تذييل </code> الذي يحتوي على أعلى <code> z-إندكس </code> من 2. </p><p> إذا، ماذا يحدث؟ </p><p> كل هذا يمكن تفسيره من حقيقة أن جميع <code> z-إندكس </code> قيم يتم حلها ضمن سياق التراص الأصل. لأن الحاوية الأصل <code>. يحتوي محتوى الموقع </code> على أعلى <code> z-إندكس </code> من تذييل <code> </code>، أي عناصر موضعية داخل <code>. يتم تقييم محتوى الموقع </code> في هذا السياق. </p><p> وهناك طريقة جيدة للتفكير في التراص النظام ضمن سياق التراص هو هذا من أنه مثل بند فرعي في قائمة أمر متداخلة. </p><p> يمكن كتابة ذلك على النحو التالي: </p><ul><li> رأس: <code> z-إندكس: 5 </code></li><li> مين: <code> z-إندكس: 4 </code><ul><li> المربع 1: <code> z-إندكس: 4. 6 </code></li><li> المربع 2: <code> z-إندكس: 4. 1 </code></li><li> المربع 3: <code> z-إندكس: 4. 3 </code></li></ul></li><li> تذييل الصفحة: <code> z-إندكس: 2 </code></li></ul><p> حتى إذا كان <code> رأسا </code> هو <code> فهرس z: 5 </code> و <code> محتوى </code> مربع 1 هو <code> z-إندكس: 6 </code> هو تقديم الأمر هو 4. 6 الذي لا يزال أقل من 5. على هذا النحو، <code> المحتوى </code> مربع 1 يظهر تحت رأس <code> </code>. </p><p> سيمالت مربكة قليلا في البداية، ولكن مع الممارسة، فإنه لا يبدأ في معنى! </p><h3><code> استمارة الفهرسة </code> z </h3><p> أنا لا أريد أن أنهي الموسم مع شيء معقد جدا، لذلك دعونا نختتم مع استراتيجية بسيطة يمكنني استخدامها لتطبيق <code> Z مؤشر </code> في جميع أنحاء المشروع. </p><p> في الأمثلة الواردة في هذا الفيديو، استخدمنا زيادات أحادية الرقم <code> z-إندكس </code>، ولكن ماذا لو أردت إضافة عنصر جديد بين اثنين تم تعيينهما ب <code> z-إندكس: 3 </code> و <code> z-إندكس: 4 </code>؟ يجب عليك تغيير الكثير من القيم - ربما في جميع أنحاء كودباس بأكمله التي يمكن أن تصبح مشكلة وعرضة للكسر كسر على أجزاء أخرى من الموقع. </p><p> أنا أحب استخدام مقياس <code> z-إندكس </code> الذي يرتفع في خطوات من 10. هذا يبقي الأمور لطيفة ومتسقة كما لا أحب رؤية هاكي <code> z الفهرس </code> القيم مثل 99999 وأرقام غريبة مثل <code> مؤشر Z: 53 </code> مجرد تبدو وكأن شيئا لم يتم التفكير من خلال بشكل صحيح. </p><p> فائدة أخرى من استخدام مقياس بمضاعفات 10 هو أنه إذا كنت حقا بحاجة إلى إدراج عنصر جديد بين اثنين آخرين، وهناك 9 القيم المحتملة التي يمكن أن تختار بين 10 و 20 ولكن لا شيء يمكنك اختيار بين 1 و </p><div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3"><div class="l-d-f l-pt3"><إمغ سرك = "/ إمغ / 78771533500a783561e23fe029158fa70. جبغ" ألت = "أتوز كس سكرينكاست: Z كس إندكسأتوز كس سكرينكاست: مؤشر Z كس بروبيرتيريلاتد توبيكس: كانفاس & سفغانيماتيونبوتسترابتموديو & سيمالت "/><div class="f-lh-title"><div class="f-c-grey-300"> لقاء المؤلف </div><div class="f-large">غي روتليدج<i class="fa fa-twitter"> </i> </div></div></div><div class="f-light f-lh-copy l-mt3"> فرونت-إند ديف أند تيتشر أت ذي جينيرال أسمبلي لندن. A إلى Z كس سكرينكاستر، مؤسس شتلة. الرقمية والشريك المؤسس لل راش الغذاء. </div></div></div></div>

March 7, 2018