การทำความเข้าใจและการใช้ตำแหน่งสัมพัทธ์ใน Divi

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

ในโพสต์นี้เราจะกล่าวถึง:

• ภาพรวมการวางตำแหน่งสี่ประเภทของ Divi
• ตำแหน่งสัมพัทธ์ "ตำแหน่ง" องค์ประกอบใน Divi
• 5 เหตุผลในการใช้ตำแหน่งสัมพัทธ์ใน Divi
• ตำแหน่งสัมพัทธ์กับมาร์จิ้น
• ตำแหน่งสัมพัทธ์กับการแปลงแปล

ตรวจสอบออก!

ภาพรวมการวางตำแหน่งสี่ประเภทของ Divi

ตำแหน่งสัมพัทธ์เป็นหนึ่งในสี่ประเภทตำแหน่งที่มีอยู่ใน Divi นี่คือภาพรวมโดยย่อของแต่ละรายการด้านล่าง

คงที่ (ค่าเริ่มต้น)

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

ญาติ

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

แอบโซลูท

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

แก้ไขแล้ว

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

หมายเหตุ: มีการจัดตำแหน่งประเภทอื่นใน CSS ที่เรียกว่า เหนียว องค์ประกอบที่อยู่ในตำแหน่งที่เหนียวแน่นจะมีพฤติกรรมเหมือนกับองค์ประกอบที่ค่อนข้างอยู่ในตำแหน่ง จนกว่าเราจะเลื่อนไปที่คอนเทนเนอร์ขององค์ประกอบนั้น (ในบางจุดที่กำหนดโดยค่าบนสุด) จากนั้นองค์ประกอบจะคงที่ (หรือติดอยู่) จนกว่าผู้ใช้จะเลื่อนไปที่ส่วนท้ายของคอนเทนเนอร์ อย่างไรก็ตาม ตำแหน่งที่ติดหนึบอาจคาดเดาไม่ได้เล็กน้อย เนื่องจากปัจจัยอื่นๆ อาจขัดขวางการทำงาน ใน Divi ตัวเลือกติดหนึบไม่พร้อมใช้งานในตัวเลือกในตัวด้วยเหตุนี้ อย่างไรก็ตาม มีวิธีใช้ “position:sticky” ใน Divi

ตำแหน่งสัมพัทธ์ "ตำแหน่ง" องค์ประกอบใน Divi

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

ใน Divi ตัวเลือกตำแหน่งเพิ่มเติมเหล่านี้สามารถพบได้ในกลุ่มตัวเลือกตำแหน่งเมื่อเลือกตำแหน่งสัมพัทธ์แล้ว

การใช้ออฟเซ็ตกับตำแหน่งสัมพัทธ์

ค่า Offset Origin และค่า Offset จะทำงานร่วมกันเพื่อวางตำแหน่งองค์ประกอบของเราทุกที่ที่เราต้องการภายในคอนเทนเนอร์หลัก ในตัวอย่างนี้ เรามีโมดูลที่มีตำแหน่งสัมพัทธ์ ออฟเซ็ตซ้ายบน ออฟเซ็ตแนวตั้ง 25px และออฟเซ็ตแนวนอน 25px สังเกตว่าค่าออฟเซ็ตจะย้ายองค์ประกอบออกจากจุดเริ่มต้นออฟเซ็ตในแนวนอนและ/หรือแนวตั้งอย่างไร

นี่คือโมดูลเดียวกันกับออฟเซ็ตเดียวกัน แต่มีจุดเริ่มต้นออฟเซ็ตด้านบนขวา

นี่คือโมดูลเดียวกันกับออฟเซ็ตเดียวกันและจุดเริ่มต้นออฟเซ็ตด้านล่างขวา

และนี่คือโมดูลเดียวกันกับออฟเซ็ตเดียวกันและจุดกำเนิดออฟเซ็ตด้านซ้ายล่าง

ไม่มีช่องว่างที่น่าประหลาดใจ

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

เหตุผลในการใช้ตำแหน่งสัมพัทธ์

#1 เพื่อแสดงผลคอนเทนเนอร์หลักสำหรับองค์ประกอบในตำแหน่งที่แน่นอน

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

#2 เพื่อย้ายองค์ประกอบโดยไม่กระทบกับองค์ประกอบอื่นๆ บนหน้า

ด้วยตำแหน่งสัมพัทธ์ เราสามารถใช้ออฟเซ็ตเพื่อเลื่อนรายการให้อยู่ในแนวเดียวกันโดยไม่กระทบกับองค์ประกอบอื่นๆ และด้วย Divi เราสามารถใช้ประโยชน์จาก UI ที่ลากได้เพื่อจัดตำแหน่งองค์ประกอบในแบบเรียลไทม์

#3 การใช้ดัชนี Z สำหรับองค์ประกอบอื่นๆ ที่ทับซ้อนกัน

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

#4 เพื่อหลีกเลี่ยงการใช้มาร์จิ้นติดลบเพื่อวัตถุประสงค์ของตำแหน่ง

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

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

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

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

ตำแหน่งสัมพัทธ์กับการแปลงแปล

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

แปลภาษาดีกว่าสำหรับแอนิเมชันและการเปลี่ยนภาพ (เช่น เอฟเฟกต์โฮเวอร์)

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

หน่วยความยาวสัมพัทธ์ตอบสนองต่างกัน

หากเราใช้หน่วยความยาวสัมพัทธ์ (เช่น % หรือ vw) สำหรับการออกแบบที่ตอบสนอง สิ่งเหล่านี้จะทำงานแตกต่างไปจากตำแหน่งสัมพัทธ์และการแปลการแปลง

โมดูล Divi ที่มีตำแหน่งสัมพัทธ์และออฟเซ็ตแนวนอน 50% จะย้ายโมดูลในแนวนอนโดยมีจำนวนเท่ากับ 50% ของความกว้างของคอนเทนเนอร์หลัก (หรือคอลัมน์)

โมดูล Divi ที่มีการแปลการแปลง (แกน X) 50% จะย้ายโมดูลในแนวนอนตามจำนวนเท่ากับ 50% ของความกว้างของโมดูลเอง

การรวมตำแหน่งสัมพัทธ์และการแปลงแปลเป็นองค์ประกอบศูนย์กลาง

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

ตัวอย่างเช่น เราสามารถใช้ตำแหน่งออฟเซ็ตแนวนอนของตำแหน่งสัมพัทธ์เพื่อจัดตำแหน่งโมดูลไปทางขวา 50% ของความกว้างคอลัมน์

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

ความคิดสุดท้าย

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

คุณมีประสบการณ์เกี่ยวกับประเภทตำแหน่งสัมพัทธ์อย่างไร?

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!