จัดตัวตามตำแหน่ง CSS

บริบทจัดตัวตามตำแหน่ง (Positioning) ของ CSS อนุญาตให้คุณจัดตัวองค์ประกอบ

CSS จัดตัวตามตำแหน่งและการเคลื่อนย้าย

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

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

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

ทุกสิ่งทั้งหมดเป็นโซ่

ตัวแปร div หรือ h1 หรือ p มักถูกเรียกว่าองค์ประกอบแบบบล็อค เพราะมันถูกแสดงเป็นบรรยายของบรรยายคือ “โซ่แบบบล็อค” ที่เป็นตรงข้าม ตัวแปร span และ strong และองค์ประกอบอื่น ๆ ถูกเรียกว่า “องค์ประกอบแบบบรรทัด” เพราะสิ่งที่มีอยู่ของมันถูกแสดงในบรรทัด หรือ “โซ่แบบบรรทัด”

คุณสามารถใช้ ตัวแปร displayเปลี่ยนชนิดของโซ่ที่ถูกสร้าง

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

<div>
some text
<p>Some more text.</p>
</div>

ในสถานการณ์นี้ โซ่นี้เรียกว่าโซ่ที่ไม่มีชื่อ เพราะมันไม่มีความเกี่ยวข้องกับองค์ประกอบที่ถูกกำหนดโดยเฉพาะ

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

หลักกลศาสตร์ตำแหน่ง CSS

CSS มีหลักกลศาสตร์ตำแหน่งสามชนิด: กระแสปกติ การเลื่อนและตำแหน่งแบบนิยม

แต่ถ้าไม่ได้ระบุเอง โดยปกติทุกโซ่จะถูกตำแหน่งในกระแสปกติ นั่นก็คือ ตำแหน่งขององค์ประกอบในกระแสปกติจะถูกกำหนดโดยตำแหน่งขององค์ประกอบใน (X)HTML

โซ่แบบบล็อคจะจัดลงแนวตรงตามทิศทางตั้งแต่บนไปยังล่าง โดยระยะห่างตรงของโซ่เป็นระยะห่างของมุมต่างๆ ของโซ่ที่มีอยู่ด้วยความสูงของมุมต่างๆ ของโซ่

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

ในบทที่ต่อไปนี้ เราจะเรียกเล่าละเอียดเกี่ยวกับการตำแหน่งเฉพาะกิจ ตำแหน่งแบบนิยมและการเลื่อน

ตัวแปร position จาก CSS

ด้วยการใช้ ตำแหน่ง positionเราสามารถเลือก 4 ชนิดของการตำแหน่ง ซึ่งจะมีผลต่อวิธีการสร้างกล่องขององค์ประกอบ

ความหมายของค่าตำแหน่ง position

static
โดยมีการสร้างโดยเองโดยปกติ
relative
แบบแก้ไขตัวอย่างจะถูกย้ายไปออกไปเป็นระยะหนึ่ง. องค์ประกอบยังคงมีรูปร่างของมันก่อนที่จะจัดทำตำแหน่ง และช่องที่มันเดิมมีใช้ยังคงมีอยู่
absolute
แบบแก้ไขตัวอย่างจะถูกลบออกจากกระแสเอกสารทั้งหมดและจัดทำตำแหน่งต่อองค์ประกอบที่มีความเกี่ยวข้อง. องค์ประกอบที่มีความเกี่ยวข้องอาจเป็นองค์ประกอบอื่นในเอกสารหรือองค์ประกอบตั้งต้น. ช่องที่องค์ประกอบเดิมได้ใช้ตามปกติจะถูกปิดออกไป เหมือนกับที่องค์ประกอบไม่มีอยู่. หลังจากที่จัดทำตำแหน่งแล้ว แบบแก้ไขตัวอย่างจะสร้างบล็อคระดับแบบแก้ไขตัวอย่าง ไม่ว่าองค์ประกอบดังกล่าวเดิมจะสร้างบล็อคระดับใดในกระแสปกติ
fixed
การแสดงของแบบแก้ไขตัวอย่างเหมือนกับการตั้งค่า position ให้เป็น absolute แต่บล็อคที่มีความเกี่ยวข้องคือหน้าต่างตัวเอง

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

ตัวอย่าง

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

ตัวแปรจัดลำดับ CSS

ตัวแปรจัดลำดับ CSS อนุญาตให้คุณจัดลำดับองค์ประกอบ

ตัวแปร คำอธิบาย
position ทำให้องค์ประกอบตั้งอยู่ในตำแหน่งที่เป็นสถานิติ ที่เป็นเรlati ve ที่เป็นอะบโซลูต์ หรือที่เป็นโฟลอต
top กำหนดตำแหน่งของช่องกว้างด้านบนขององค์ประกอบที่มีการจัดลำดับที่ตั้งอยู่เบื้องหลังกับช่องกว้างด้านบนของบล็อคที่มีอยู่
right กำหนดตำแหน่งของช่องกว้างด้านขวาขององค์ประกอบที่มีการจัดลำดับที่ตั้งอยู่เบื้องหลังกับช่องกว้างด้านขวาของบล็อคที่มีอยู่
bottom กำหนดตำแหน่งของช่องกว้างด้านล่างขององค์ประกอบที่มีการจัดลำดับที่ตั้งอยู่เบื้องหลังกับช่องกว้างด้านล่างของบล็อคที่มีอยู่
left กำหนดตำแหน่งของช่องกว้างด้านซ้ายขององค์ประกอบที่มีการจัดลำดับที่ตั้งอยู่เบื้องหลังกับช่องกว้างด้านซ้ายของบล็อคที่มีอยู่
overflow ตั้งค่าสิ่งที่เกิดขึ้นเมื่อเนื้อหาขององค์ประกอบหลุดออกนอกพื้นที่
clip ตั้งค่ารูปร่างขององค์ประกอบ องค์ประกอบจะถูกตัดเข้าไปในรูปร่างนี้ แล้วแสดงออกมา
vertical-align ตั้งค่าวิธีการปรับเปรมุติภายในตัวองค์ประกอบ
z-index ตั้งค่าลำดับการแสดงตัวขององค์ประกอบ