CSS - การวางตำแหน่ง
CSS ช่วยให้คุณวางตำแหน่งองค์ประกอบ HTML ของคุณ คุณสามารถวางองค์ประกอบ HTML ในตำแหน่งใดก็ได้ที่คุณต้องการ คุณสามารถระบุได้ว่าคุณต้องการให้องค์ประกอบอยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งธรรมชาติในหน้าหรือค่าสัมบูรณ์ตามองค์ประกอบหลัก
ตอนนี้เราจะเห็นคุณสมบัติที่เกี่ยวข้องกับการวางตำแหน่ง CSS ทั้งหมดพร้อมตัวอย่าง -
ตำแหน่งสัมพัทธ์
การวางตำแหน่งสัมพัทธ์จะเปลี่ยนตำแหน่งขององค์ประกอบ HTML ที่สัมพันธ์กับตำแหน่งที่ปรากฏตามปกติ ดังนั้น "left: 20" จึงเพิ่ม 20 พิกเซลให้กับตำแหน่ง LEFT ขององค์ประกอบ
คุณสามารถใช้สองค่าด้านบนและด้านซ้ายพร้อมกับคุณสมบัติตำแหน่งเพื่อย้ายองค์ประกอบ HTML ไปที่ใดก็ได้ในเอกสาร HTML
- เลื่อนไปทางซ้าย - ใช้เป็นค่าลบสำหรับซ้าย
- ย้ายไปทางขวา - ใช้เป็นค่าบวกสำหรับซ้าย
- เลื่อนขึ้น - ใช้เป็นค่าลบสำหรับด้านบน
- ย้ายลง - ใช้เป็นค่าบวกสำหรับด้านบน
NOTE- คุณสามารถใช้ด้านล่างหรือด้านขวาค่าเช่นกันในลักษณะเดียวกับด้านบนและด้านซ้าย
นี่คือตัวอย่าง -
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
ตำแหน่งที่แน่นอน
องค์ประกอบที่มี position: absolute อยู่ในตำแหน่งพิกัดที่ระบุโดยสัมพันธ์กับมุมบนซ้ายของหน้าจอ
คุณสามารถใช้สองค่าด้านบนและด้านซ้ายพร้อมกับคุณสมบัติตำแหน่งเพื่อย้ายองค์ประกอบ HTML ไปที่ใดก็ได้ในเอกสาร HTML
- เลื่อนไปทางซ้าย - ใช้เป็นค่าลบสำหรับซ้าย
- ย้ายไปทางขวา - ใช้เป็นค่าบวกสำหรับซ้าย
- เลื่อนขึ้น - ใช้เป็นค่าลบสำหรับด้านบน
- ย้ายลง - ใช้เป็นค่าบวกสำหรับด้านบน
NOTE- คุณสามารถใช้ค่าด้านล่างหรือด้านขวาได้เช่นเดียวกับด้านบนและด้านซ้าย
นี่คือตัวอย่าง -
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>ตำแหน่งคงที่
การวางตำแหน่งคงที่ช่วยให้คุณสามารถกำหนดตำแหน่งขององค์ประกอบไปยังจุดเฉพาะบนหน้าได้โดยไม่คำนึงถึงการเลื่อน พิกัดที่ระบุจะสัมพันธ์กับหน้าต่างเบราว์เซอร์
คุณสามารถใช้สองค่าด้านบนและด้านซ้ายพร้อมกับคุณสมบัติตำแหน่งเพื่อย้ายองค์ประกอบ HTML ไปที่ใดก็ได้ในเอกสาร HTML
- เลื่อนไปทางซ้าย - ใช้เป็นค่าลบสำหรับซ้าย
- ย้ายไปทางขวา - ใช้เป็นค่าบวกสำหรับซ้าย
- เลื่อนขึ้น - ใช้เป็นค่าลบสำหรับด้านบน
- ย้ายลง - ใช้เป็นค่าบวกสำหรับด้านบน
NOTE- คุณสามารถใช้ด้านล่างหรือด้านขวาค่าเช่นกันในลักษณะเดียวกับด้านบนและด้านซ้าย
นี่คือตัวอย่าง -
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>