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>