วิธีทำความเข้าใจ CSS Position Absolute ครั้งแล้วครั้งเล่า

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

การวางตำแหน่งองค์ประกอบนั้นเกี่ยวข้องกับตำแหน่งคอนเทนเนอร์ขององค์ประกอบมากกว่าตำแหน่งของตัวเอง เพื่อให้สามารถวางตำแหน่งตัวเองได้ต้องรู้ว่า div พาเรนต์ตัวไหนจะจัดตำแหน่งตัวเองเทียบ

โค้ดด้านล่างแสดง div ที่ซ้อนกันสี่ตัว .box-1เพื่อ.box-3เป็นศูนย์กลางโดยdisplay: flexและmargin: autoเพียง .box-4ไม่ได้marginตั้งค่าและอยู่ในตำแหน่งเริ่มต้นในโฟลว์เอกสาร

positionคุณสมบัติไม่มีการตั้งค่าทุกองค์ประกอบ

body { display: flex;}
.box-1,.box-2,.box-3 { display: flex; margin: auto;}

เพื่อให้สามารถวางตำแหน่งตัวเองได้องค์ประกอบต้องรู้สองสิ่ง:

  • พิกัดสำหรับด้านxและyชุดตำแหน่งงานโดยทั้งtop, right, bottom,left
  • ผู้ปกครองคนไหนที่จะวางตำแหน่งตัวเองเมื่อเทียบกับ

เมื่อนำposition: absoluteไปใช้กับ.box-4องค์ประกอบจะถูกลบออกจากไฟล์normal document flow. เนื่องจากไม่ได้ตั้งค่าพิกัดจึงอยู่ที่ตำแหน่งเริ่มต้นซึ่งเป็น div พาเรนต์ของมุมซ้ายบน

จากการตั้งค่าtop: 0และleft: 0องค์ประกอบจะต้องรู้ว่าแม่แบบใดที่จะพิจารณาเป็นจุดอ้างอิง position: relativeเพื่อจะมีการอ้างอิงองค์ประกอบจะต้องมีการวางตำแหน่งให้หน้าจอด้วย .box-4จากนั้นเริ่มถาม div พาเรนต์ว่าอยู่ในตำแหน่งหรือไม่ ในตอนแรกจะถาม.box-3และได้No, I am not positioned.รับคำตอบ เดียวกันจะไปสำหรับ.box-2แล้วเนื่องจากทุกคนมี.box-1position: unset

เนื่องจาก.box-4ไม่สามารถหาตำแหน่งแม่ตำแหน่งได้จึงวางตำแหน่งตัวเองเมื่อเทียบกับbody. องค์ประกอบนั้นจะอยู่ในตำแหน่งเสมอหน้าจอ:

ถ้าเราตั้งค่าposition: relativeเป็น.box-1เมื่อ.box-4ถามมันAre you positioned?จะได้Yes I am.รับคำตอบ จากนั้น.box-4จะวางตำแหน่งเทียบกับ.box-1:

เดียวกันจะไปสำหรับและ.box-2.box-3

องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะวางตำแหน่งตัวเองโดยเทียบกับบรรพบุรุษที่อยู่ใกล้ที่สุด

ทันทีที่พบบรรพบุรุษที่อยู่ในตำแหน่งตำแหน่งขององค์ประกอบด้านบนจะไม่เกี่ยวข้องอีกต่อไป ภาพด้านล่างนี้แสดงให้เห็นรูปแบบการตั้งค่าposition: relativeไป.box-2 และ.box-3ตามลำดับ:

คุณสามารถดูคำอธิบายวิดีโอได้ที่ Code Sketch Channel?

ขอบคุณที่อ่าน! ✌️

เผยแพร่ครั้งแรกที่ marina-ferreira.github.io