CSS z-index: ภาพรวมคุณสมบัติ

กฎ CSS z-index - ตำแหน่งขององค์ประกอบของหน้าใน Z coordinate: ระดับของการแสดงผลขององค์ประกอบหรือเลเยอร์ที่มีอยู่ แท็กที่มีดัชนี z มากขึ้นจะแสดงอย่างครบถ้วน แท็กจะแสดงตามลำดับที่ปรากฏในชุดข้อมูลขาเข้าและซ้อนทับกัน приоритет видимости. ค่า z-index กำหนด ลำดับความสำคัญในการมองเห็น

จำเป็นต้องจ่ายส่วยให้เบราว์เซอร์ที่ทันสมัยและอัลกอริทึมสำหรับแสดงองค์ประกอบ ตั้งแต่เวลาที่กราฟิกจับภาพหน้าจอและปัญหาของการตัดส่วนที่มองไม่เห็นและมองไม่เห็นขององค์ประกอบในหน้าต่างแอ็พพลิเคชันเทคโนโลยีการแสดงเนื้อหาที่มองเห็นได้ประสบความสำเร็จอย่างยอดเยี่ยม ในหน้าต่างเบราเซอร์รายการทั้งหมดจะแสดงอย่างถูกต้องผู้ใช้จะเห็นเฉพาะสิ่งที่กำหนดโดยการออกแบบหรือผู้พัฒนาเท่านั้น

กฎทั่วไป: ลำดับและระดับ

สตรีมอินพุต (หน้าเว็บที่เซิร์ฟเวอร์สร้างขึ้น) จะถูกอ่านโดยลำดับตามลำดับ แท็กทั้งหมดจะแสดงตามกฎของ CSS และสามารถซ้อนทับกันได้

ในตัวอย่างนี้อธิบายองค์ประกอบที่มองเห็นได้สี่รายการ ทุกบล็อกถัดไปจะบล็อกก่อนหน้านี้ ในตำแหน่งที่ตัดแท็กคำถามเกี่ยวกับความสำคัญเกิดขึ้น เนื่องจากกฎ CSS z-index สำหรับแท็กทั้งหมดมีความเหมือนกันและเท่ากับ 848 องค์ประกอบต่อไปจะปรากฏให้เห็น ทุกสิ่งทุกอย่างที่ดูออกมาจากองค์ประกอบถัดไปเห็นได้ชัด

กฎการมองเห็น

เบราเซอร์ปฏิบัติตามหลักเกณฑ์การเปิดเผยเท่านั้น "สุจริต" คิดขั้นตอนวิธีที่คุณสามารถวิเคราะห์การซ้อนทับทั้งหมดและใช้เฉพาะผู้ที่ตัดกันโดยไม่คำนึงถึงไซต์เหล่านั้นที่ถูกดูดกลืนโดยแต่ละองค์ประกอบต่อไปนี้เป็นเรื่องยากมาก

ในกรณีส่วนใหญ่นี้ไม่จำเป็น อุปกรณ์ที่ทันสมัยทำงานได้อย่างรวดเร็วและมีปัญหาในการสังเกตการวาดใหม่ขององค์ประกอบก่อนที่องค์ประกอบถัดไปจะลบล้าง

ผลต่อลำดับขององค์ประกอบ

เพียงพอสำหรับแท็ก scCSS3 ที่สามเพื่อเพิ่มค่า z-index และ scCSS4 - เพื่อลดค่าดังกล่าวเนื่องจากการเปลี่ยนแปลงภาพโดยทั่วไป ลำดับขององค์ประกอบในสตรีมยังคงเหมือนเดิม:

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

ควรสังเกตว่าภาพที่สองใช้พื้นที่มากขึ้นกว่าที่ดูเหมือน ภาพที่สามด้วย นอกจากนี้ยังประกอบด้วยสองส่วน (สองไข่) ซึ่งอยู่ห่างจากกันและกัน

มิติที่แท้จริงของพื้นที่ที่ใช้ภาพที่สองและสามจะถูกเน้นด้วยสีเหลืองและสีเทาตามลำดับ

รวม z-index ด้วย background-color

ควรสังเกตว่าพื้นหลังของ CSS และ z-index complement กันและกัน ทุกองค์ประกอบของบล็อกและส่วนอื่น ๆ มักใช้พื้นที่เป็นรูปสี่เหลี่ยมผืนผ้าซึ่งมีความสูงสูงสุดและความกว้างสูงสุดของเนื้อหา

การใช้รูปภาพคุณสามารถกำหนดรูปร่างให้กับพื้นที่ขององค์ประกอบได้ แต่จะมีสี่เหลี่ยมผืนผ้าอยู่รอบ ๆ นี่เป็นข้อเท็จจริงที่สำคัญในการพิจารณาอย่างถูกต้อง

คุณสามารถวางข้อความรอบโครงร่างของรูปร่างที่เลือกได้ แต่ถ้าไม่ทำเนื้อหาจะตกอยู่ในองค์ประกอบใด ๆ เช่นในกล่องรูปสี่เหลี่ยมผืนผ้าตามลำดับเนื่องจากมาจากสตรีมอินพุต

การใช้คุณสมบัติ CSS ของ z-index ในองค์ประกอบที่พื้นหลังสีโปร่งใส (ความโปร่งใส) ช่วยให้คุณเลียนแบบเค้าโครงขององค์ประกอบได้ แม้ว่าในความเป็นจริงองค์ประกอบจะเป็นรูปสี่เหลี่ยมผืนผ้า

การแสดงเหตุการณ์และองค์ประกอบ

ในสถานที่ที่องค์ประกอบถูกบล็อกโดยองค์ประกอบอื่นกิจกรรมที่เกิดขึ้นจะไม่ทำงาน ตามกฎทั่วไปถ้าองค์ประกอบอยู่นอกสายตาก็ยังอยู่นอกขอบเขต

หากนักพัฒนาซอฟต์แวร์ต้องการล็อคปุ่มหรือรายการเมนูเขาสามารถวางแท็กอื่นไว้เหนือแท็กที่ถูกบล็อกซึ่งอาจโปร่งใส (ตัวอย่างเช่นใช้กฎความทึบของ CSS) แต่ในกรณีที่มีดัชนี CSS z สูงกว่า

เนื่องจากเหตุการณ์ที่เกิดขึ้นจากมุมมองของผู้ใช้สามารถแบ่งออกเป็นส่วนที่มีความหมายและไม่มีเช่นหลัง (การเคลื่อนไหวของเมาส์การกดแป้นพิมพ์บนคีย์บอร์ดสัญญาณนาฬิกาจับเวลา) สามารถใช้เพื่อเปลี่ยนเนื้อหาในหน้าต่างเบราเซอร์ได้อย่างเหมาะสม

ตัวอย่างง่ายๆ: ผู้เข้าชม เลื่อนตัวชี้เมาส์ไป ที่รายการเมนู แต่ยังไม่ได้ตัดสินใจที่จะทำอะไร ผู้พัฒนาสามารถคาดการณ์เหตุการณ์นี้ติดตามการเคลื่อนไหวไปยังจุดที่ต้องการของบทสนทนา (คลิก - ผู้เข้าชมตัดสินใจ) และแสดงเนื้อหาที่เพียงพอ กฎ CSS z-index ทำงานได้ดีที่สุดสำหรับกรณีนี้

รูปแบบรูปภาพ

เนื่องจากภาพเป็นวัสดุก่อสร้างที่สำคัญสำหรับไซต์ใด ๆ (ความงามความทันสมัยการใช้งานเป็นสิ่งที่คุ้นเคยแล้ว) เป็นเรื่องสำคัญที่ต้องเลือกรูปแบบภาพ

โดยทั่วไปแล้วคุณสามารถใช้รูปแบบต่างๆที่มีอยู่ทั้งหมด แต่จากมุมมองของการใช้งานจริงและประสิทธิภาพเหมาะสมที่จะ จำกัด * .png สำหรับภาพนิ่งและ * .gif สำหรับภาพเคลื่อนไหว นิยม * .jpg เป็นสิ่งที่ดี แต่ไม่อนุญาตให้คุณใช้พื้นที่ในการแสดงผลได้อย่างคล่องตัว

ข้อผิดพลาดของเบราว์เซอร์และนักพัฒนาซอฟต์แวร์

บ่อยครั้งที่ CSS z-index ไม่ทำงาน แต่เกิดขึ้น กฎของตารางสไตล์ cascading ทำงานตลอดเวลาและปริมาณของแฟ้มรูปแบบมักจะถึงไดรฟ์ข้อมูลที่สำคัญ เมื่อสิ่งที่ไม่ได้แสดงหรือมีเพียงไม่สิ่งที่ควรจะเป็นก่อนอื่นคุณต้องตรวจสอบรหัสของคุณเองแล้วล้างแคชของเบราเซอร์และอีกครั้งตรวจสอบรหัสของคุณเอง

การตีความ HTML และ CSS เบราว์เซอร์เกือบจะไม่ทำผิดพลาด - เป็นสัจพจน์ หากองค์ประกอบที่ต้องการไม่มีอยู่หมายความว่าในการสร้าง CSS {position: absolute; ดัชนี Z: 112233; ซ้าย: 10px; ด้านบน: 20px; ... } บางอย่างหายไปหรือสะกดผิด

ข้อผิดพลาดที่พบมากที่สุดคือพิกัดขององค์ประกอบไม่ถูกต้องบ่งชี้ถึงการมองเห็นตำแหน่งที่แน่นอนหรือตำแหน่งสัมพัทธ์หายไป บางครั้งสไตล์สามารถระบุได้โดยตรงกับองค์ประกอบไม่ใช่ในสไตล์ของมัน ในกรณีหลังนี้เป็นวิธีที่ไม่อยู่ในสถานการณ์ แต่ส่วนใหญ่จะบ่งบอกถึงข้อผิดพลาดบางอย่างในโค้ด

ต้องระบุสไตล์ในสไตล์ของคลาสหรือตัวระบุ ระบุสไตล์ในองค์ประกอบเฉพาะในกรณีพิเศษ

การใช้ jQuery.css (z-index, 123) อาจทำให้เกิดข้อผิดพลาดหากนำไปใช้กับคลาสหรือตัวระบุที่ไม่ถูกต้อง นอกจากนี้ jQuery เป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ยอดเยี่ยมจริงๆ อย่างไรก็ตามก่อนที่คุณจะใช้มันไม่เจ็บที่จะคิดว่า: ไม่สามารถทำอะไรกับชั่วคราว HTML / CSS, z-index ไม่ได้เป็นกฎที่ไม่จำเป็นต้องให้ความสนใจใกล้ชิด

แก้ไขเลเยอร์และการเคลื่อนไหวที่ถูกต้อง

หน้าเหมาะเป็นแบบแบน ในกรณีใด ๆ มันอยู่ไกลจากภาพที่มีขนาดจริงในระดับมวลและไม่มีความจำเป็นพิเศษสำหรับเรื่องนี้ เว็บไซต์สมัยใหม่คือการปฏิบัติจริงงานจริง พวกเขาต้องทำงาน แต่คนที่แบนแสดงภาพสามมิติ

โดยวิธีการที่ปรากฏการณ์ หน้า Landing Page ในรูปแบบของการสร้างเว็บไซต์คือการยืนยันที่ดีที่สุดว่ารูปสี่เหลี่ยมผืนผ้าแบนและเนื้อหาแห้ง แต่ชัดเจนมากยังดีและเป็นประโยชน์ แต่ก็ควรสังเกตว่าเว็บไซต์ของ บริษัท ผูกขาดยังคงเป็นของตัวเอง: สิ่งที่สำคัญคือบุคคลของ บริษัท การทำงานและความสามารถในการผลิต มอนสเตอร์ของเทคโนโลยีสารสนเทศพบว่าหน้า Landing Page - นี่คือหน้าของธุรกิจขนาดเล็กอุปกรณ์เสริมเฮอร์บาไลฟ์และเครื่องประดับ "อื่น ๆ "

ดังนั้นหรือไม่ตามที่เป็นจริงถูกต้องอนาคตจะแสดง เป็นเรื่องสำคัญที่ทุกรุ่นของเว็บไซต์จะมีความหมายไม่เฉพาะในการวาดเลเยอร์เนื้อหาเท่านั้น แต่ยังช่วยให้มั่นใจได้ว่ามีการเคลื่อนไหวที่ถูกต้องระหว่างพวกเขา

ทางออกที่สมบูรณ์แบบคือ AJAX (หน้าเว็บมีการปรับปรุงตามต้องการ) โซลูชันที่มีแนวโน้มมากยิ่งขึ้นคือเมื่อหน้าแสดงสิ่งที่จำเป็นในจุดที่กำหนดในหน้าต่างเบราเซอร์

ในความเป็นจริง z-index เป็นกฎ CSS ง่ายๆ จุดประสงค์ของมันคือการแสดงระดับของแท็กเพื่อให้เบราว์เซอร์สามารถกำหนดเวลาที่จะแสดงองค์ประกอบและส่วนใดขององค์ประกอบนี้จะมองเห็นได้ เลเยอร์และหน้ามีความสัมพันธ์กันมากเนื่องจากมีปัญหาในการพัฒนาหน้าเว็บและจดจำค่าของกฎ z-index สำหรับตัวเลือกการแสดงผลเนื้อหาต่างๆ

โดยปกติแล้วนักพัฒนาซอฟต์แวร์จะเลือกหมายเลขที่ชื่นชอบและให้แท็กทั้งหมดอยู่ในแถวและผู้ที่ต้องการให้เลขต่อไปโดดเด่นกว่า การให้ความสำคัญกับเลเยอร์และระดับหน้าเว็บไม่ได้เป็นการปฏิบัติที่ก้าวหน้าและมีแนวโน้มมากนัก

อย่างไรก็ตามถ้าคุณถ่ายโอนความหมายของ z-index ไปยังพื้นที่สนทนากับผู้เข้าชมคุณสามารถสร้างผลในทางปฏิบัติได้ เช่นเดียวกับแท็กที่ทับซ้อนกันคุณสามารถซ้อนทับไดอะล็อก (ผู้เยี่ยมชมไซต์) และดำเนินการย้ายระหว่างพวกเขา จากมุมมองนี้การใช้กฎ CSS z-index ดูเหมือนจะเป็นประโยชน์และเป็นประโยชน์