พื้นฐาน CSS: ตำแหน่งและลอย

CSS มีคุณสมบัติสำหรับการวางตำแหน่งและการลอยที่ช่วยให้คุณสามารถสร้างเลย์เอาต์แบบเรียงเป็นแนว ซ้อนทับส่วนหนึ่งของเลย์เอาต์กับอีกส่วนหนึ่ง และทำงานที่จำเป็นต้องใช้หลายตารางเป็นเวลาหลายปี
แนวคิดพื้นฐานของการวางตำแหน่งนั้นง่าย โดยช่วยให้คุณสามารถกำหนดตำแหน่งที่กล่องขององค์ประกอบควรปรากฏโดยสัมพันธ์กับตำแหน่งปกติ หรือสัมพันธ์กับองค์ประกอบหลัก องค์ประกอบอื่น หรือแม้แต่หน้าต่างเบราว์เซอร์เอง แน่นอนว่าฟีเจอร์นี้ทรงพลังและน่าประหลาดใจมาก ไม่น่าแปลกใจเลยที่รู้ว่า User Agent รองรับการวางตำแหน่งใน CSS2 ได้ดีกว่าด้านอื่นๆ มาก
ในทางกลับกัน Floats เปิดตัวครั้งแรกใน CSS1 และอิงตามฟีเจอร์ที่เพิ่มโดย Netscape ในช่วงแรกๆ ของเว็บ การลอยตัวไม่ใช่ตำแหน่งที่แน่นอน แต่ก็ไม่ใช่เค้าโครงโฟลว์ปกติเช่นกัน เราจะมาอธิบายความหมายของ float ในบทต่อๆ ไป

ทุกอย่างเป็นกรอบ

องค์ประกอบ div, h1 หรือ p มักเรียกว่าองค์ประกอบระดับบล็อก ซึ่งหมายความว่าองค์ประกอบเหล่านี้จะปรากฏเป็นบล็อกของเนื้อหา ซึ่งก็คือ "กล่องบล็อก" ในทางตรงกันข้าม องค์ประกอบต่างๆ เช่น span และ strong เรียกว่า "องค์ประกอบแบบอินไลน์" เนื่องจากเนื้อหาปรากฏภายในบรรทัด ซึ่งก็คือ "กล่องแบบอินไลน์"
คุณสามารถเปลี่ยนประเภทของกล่องที่สร้างขึ้นโดยใช้คุณสมบัติการแสดงผล ซึ่งหมายความว่าคุณสามารถทำให้องค์ประกอบแบบอินไลน์ (เช่น องค์ประกอบ <a>) ทำงานเหมือนกับองค์ประกอบระดับบล็อกได้โดยการตั้งค่าคุณสมบัติการแสดงผลให้บล็อก คุณยังสามารถตั้งค่าการแสดงผลเป็น none เพื่อให้องค์ประกอบที่สร้างขึ้นไม่มีกล่องเลย ด้วยวิธีนี้ กล่องและเนื้อหาทั้งหมดจะไม่สามารถมองเห็นได้อีกต่อไป และไม่กินพื้นที่ในเอกสาร
แต่ในกรณีหนึ่ง องค์ประกอบระดับบล็อกจะถูกสร้างขึ้นแม้ว่าจะไม่มีคำจำกัดความที่ชัดเจนก็ตาม สิ่งนี้จะเกิดขึ้นเมื่อคุณเพิ่มข้อความที่จุดเริ่มต้นขององค์ประกอบระดับบล็อก (เช่น div) แม้ว่าข้อความจะไม่ได้กำหนดเป็นย่อหน้า แต่จะถือว่าข้อความดังกล่าวเป็น:


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

กลไกการวางตำแหน่ง CSS

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

คุณสมบัติตำแหน่ง CSS

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

คุณสมบัติการวางตำแหน่ง CSS

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