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

แน่นอนในบทช่วยสอนนี้เราจะพูดถึง:

  • ภาพรวมของการวางตำแหน่งสี่ประเภท Divi
  • ตำแหน่งสัมพันธ์ "ตำแหน่ง" ขององค์ประกอบบน Divi
  • 4 เหตุผลที่แสดงให้เห็นถึงการใช้ตำแหน่งสัมพัทธ์บน Divi
  • ตำแหน่งสัมพัทธ์กับระยะขอบ
  • ตำแหน่งสัมพัทธ์กับ Transformer Translate

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

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

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

โมดูลที่มีตำแหน่งคงที่

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

ญาติ

โมดูลที่มีตำแหน่งสัมพัทธ์

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

แน่นอน

โมดูลข้อความที่มีตำแหน่งแน่นอนและออฟเซ็ต

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

คงที่

โมดูลที่มีตำแหน่งคงที่ Divi

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

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

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

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

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

โมดูลที่มีการวางตำแหน่งแบบสัมพัทธ์บน Divi

ใช้ offsets กับตำแหน่งสัมพัทธ์

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

โมดูลที่มีตำแหน่งสัมพัทธ์ 2

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

โมดูลที่มีมุมตำแหน่งสัมพัทธ์ 2

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

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

โมดูลที่มีตำแหน่งสัมพันธ์เชิงมุม 3

ไม่มีการเว้นระยะที่น่าแปลกใจ

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

โมดูลพร้อมคำอธิบายตำแหน่งออฟเซ็ตสัมพัทธ์

ทำไมต้องใช้ตำแหน่งสัมพัทธ์

เหตุผลที่ 1: สร้างพาเรนต์คอนเทนเนอร์สำหรับองค์ประกอบที่วางตำแหน่งอย่างแน่นอน

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

ตำแหน่งสัมพัทธ์ 7

เหตุผลที่ 2: ย้ายรายการโดยไม่มีผลกับรายการอื่นในหน้า

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

เหตุผลที่ 3: เพื่อใช้ดัชนี Z เพื่อซ้อนทับองค์ประกอบอื่น ๆ

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

ตำแหน่งซ้อนทับสัมพัทธ์

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

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

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

ภาพเคลื่อนไหวตำแหน่งสัมพัทธ์

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

เพื่อสรุป

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

ที่มา: ธีมที่สง่างาม