ใช้ CSS เพื่อวางองค์ประกอบ HTML

• อาจ 20, 2024

กฎ CSS ให้ความสามารถในการวางองค์ประกอบ HTML ตรงตามที่คุณต้องการ คุณสามารถปรับวิธีที่พวกเขาตอบสนองต่อองค์ประกอบอื่น ๆ ที่อยู่รอบ ๆ พวกเขาหรือแม้กระทั่งซ่อนพวกเขาทั้งหมด นี่คือรายละเอียดของคุณสมบัติตำแหน่ง CSS

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

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

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

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

ล้าง: คุณสมบัตินี้ทำงานร่วมกับคุณสมบัติ "ลอย" มันตัดสินใจว่าองค์ประกอบจะให้องค์ประกอบอื่น ๆ ลอยไปมาได้อย่างไร - "ชัดเจน: ซ้าย" หมายความว่าไม่มีองค์ประกอบอื่นใดที่สามารถลอยไปทางซ้ายได้ "clear: right" ปิดกั้นทางด้านขวาและ "clear: both" หมายถึงไม่มีองค์ประกอบใดที่สามารถลอยไปที่ด้านใดด้านหนึ่งได้ การตั้งค่าเริ่มต้นคือ "ชัดเจน: ไม่มี" (หมายถึงองค์ประกอบอื่น ๆ สามารถลอยไปที่ด้านใดด้านหนึ่ง)