CSS position property : สอน property ของ position property, เรียน property ของ position property
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • position ใช้กำหนดรูปแบบวิธีการจัดวางตำแหน่งของ element
    top ใช้กำหนดระยะห่างระหว่าง ขอบด้านบน เมื่อเทียบกับ element
    right ใช้กำหนดระยะห่างระหว่าง ขอบด้านขวา เมื่อเทียบกับ element
    bottom ใช้กำหนดระยะห่างระหว่าง ขอบด้านล่าง เมื่อเทียบกับ element
    left ใช้กำหนดระยะห่างระหว่าง ขอบด้านซ้าย เมื่อเทียบกับ element
    float ใช้กำหนดตำแหน่งของ element ว่าให้ชิดขวาหรือชิดซ้าย
    clear ใช้สิ้นสุดการจัดตำแหน่งของ element ด้วย property float
    z-index ใช้กำหนดลำดับชั้น บน-ล่าง ในกรณีที่ element ซ้อนกัน
    chip ใช้กำหนดรูปแบบของ element โดยส่วนใหญ่จะใช้กับการ กำหนดรูปร่างของรูปภาพ หรือรูปเรขาคณิต
    overflow-x ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน x
    overflow-y ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน y
    overflow ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ทั้งแกน x และแกน y
  • property :
    position

    value :
    fixed เป็นการวางตำแหน่งอย่างตายตัว,
    static เป็นการวางตำแหน่งตามลำดับก่อน-หลัง,
    absolute เป็นการวางตำแหน่งโดยดูจากแกน x, y และเทียบจาก tag แม่,
    relative เป็นการวางตำแหน่งโดยดูจาก x, y และเทียบจาก tag มันเอง

    content :
    ใช้กำหนดรูปแบบวิธีการจัดวางตำแหน่งของ element

    example :
    { position: absolute; }

  • property :
    top

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่าง ขอบด้านบน เมื่อเทียบกับ element

    example :
    { top: -30px; }

  • property :
    right

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่าง ขอบด้านขวา เมื่อเทียบกับ element

    example :
    { right: 50px; }

  • property :
    bottom

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่าง ขอบด้านล่าง เมื่อเทียบกับ element

    example :
    { bottom: -80px; }

  • property :
    left

    value :
    auto, cm, px, pt

    content :
    ใช้กำหนดระยะห่างระหว่าง ขอบด้านซ้าย เมื่อเทียบกับ element

    example :
    { left: 20px; }

  • property :
    float

    value :
    left, right, none

    content :
    ใช้กำหนดตำแหน่งของ element ว่าให้ชิดขวาหรือชิดซ้าย

    example :
    { float: none; }

  • property :
    clear

    value :
    left, right, both

    content :
    ใช้สิ้นสุดการจัดตำแหน่งของ element ด้วย property float
    ก่อนที่จะจัดตำแหน่งด้วยวิธีอื่นต่อไป

    example :
    { clear: both; }

  • property :
    z-index

    value :
    auto, ตัวเลข

    content :
    ใช้กำหนดลำดับชั้น บน-ล่าง ในกรณีที่ element ซ้อนกัน โดยตัวเลขที่มากกว่าจะอยู่ทับตัวเลขที่น้อยกว่า

    example :
    { z-index: 3; }

  • property :
    chip

    value :
    auto, shape

    content :
    ใช้กำหนดรูปแบบของ element โดยส่วนใหญ่จะใช้กับการ
    กำหนดรูปร่างของรูปภาพ หรือรูปเรขาคณิต

    example :
    { chip: auto; }

  • property :
    overflow-x

    value :
    auto, visible, hidden, scroll

    content :
    ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน x
    ( ว่าจะให้มี scroll bar หรือไม่ อย่างไร )

    example :
    { overflow-x: visible }

  • property :
    overflow-y

    value :
    auto, visible, hidden, scroll

    content :
    ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน y
    ( ว่าจะให้มี scroll bar หรือไม่ อย่างไร )

    example :
    { overflow-y: scroll; }

  • property :
    overflow

    value :
    auto, visible, hidden, scroll

    content :
    ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ทั้งแกน x และแกน y
    ( ว่าจะให้มี scroll bar หรือไม่ อย่างไร )

    example :
    { overflow: hidden; }

 
Share This Chapter Login with Facebook