CSS Position

หัวใจสำคัญของการวางเลเอาท์หน้าเว็บด้วย CSS อีกอย่างที่ถือว่าสำคัญ อันดับต้นๆ คือ การสั่ง positioning ของ วัตถุ ที่ลอยๆ อยู่บนหน้าเว็บ

หลักๆ คือ tag div(s) ของ xhtml นั่นเอง

จะเลือกใช้อันไหนระหว่าง static, relative, absolute

1. Static

สำหรับค่า ดีฟอลท์ หรือค่าพื้นฐานของ position คือ static ครับ หมายถึง ถ้าในกรณีที่เราไม่ได้กำหนด position ให้ element ใดๆ css จะเลือกค่า static ให้โดยปริยาย และ ข้อสำคัญของการใช้ static คือไม่สามารถสั่งได้ว่าให้ห่างจาก ซ้าย ขวา หน้า หลัง ได้เท่าไหร่

2.relative

ถ้า กำหนด position ให้เป็น relative คุณสามารถจะให้ วัตถุอยู่ถัดจาก element ก่อนหน้าโดยลักษณะของการกำหนด position: relative; top: 20px; left: -50px; ลักษณะการเขียนอย่างนี้ จะทำให้ element ที่ถูกกำหนด ให้ด้านบน ห่างจาก element ก่อนหน้า 20px และ เขยื้อนไปทางซ้าย ถ้าเอาเทียบกับ element ก่อนหน้า -50px

3. Absolute

ถ้า position ของ element ใดๆ โดนสั่งแบบ absolute การทำงานคือ ไม่ว่าคุณจะสั่งให้ไปอยู่ที่ไหนในหน้า absolute จะไปตามสั่ง โดยไม่ได้มีการอ้างอิงค่า จาก element ก่อนหน้าครับ คือแยกออกไปเลย โดยการอ้างอิงตำแหน่ง แกน x,y ตามหน้าจอ

 

เช่น position: absolute; top: 20px; left: 80px; ตำแหน่งของวัตถุจะอยู่ห่างจากขอบจอของบราวเซอร์ด้านบน 20px ด้านซ้าย 80px คับ

การซ้อน position แบบ ซ้อน absolute ใน relative ซึ่งค่า absolute อยู่ใน element ของ relative ค่า absolute แบบนี้ จะอ้างอิงค่า x,y ของ element ที่ถูกสั่ง position เป็น relative แทนที่การอ้างค่า x,y ของหน้าเว็บแทนนะครับ

เช่น

.relative-1 {
position: relative;
left: 100px;
top: 30px;
background: #ff9900;
height: 150px;
width: 700px;
}
.absolute-1 {
position: absolute;
top: 20px;
right: 5px;
background: #FFFFFF;
}

โดย

<div class="relative-1">
ทดสอบลักษณะการแสดงผลของง position relative
<div class="absolute">
ตัวนี้ absolute
</div>
</div>

ถ้าหากเราเขียน กำหนดตำแหน่ง position และนำไปใช้ใน xhtml ให้กับ elements แบบนี้ คลาส absolute-1 จะอ้างค่า x,y จาก คลาส relative-1 แทนการอ้างค่าจากหน้าจอ

และถ้าจะเขียนให้มันกว่านี้ ต้องใช้คู่กับ float ครับ ยังไง ? ติมตามเรื่อง float ในตอนต่อไปคับ

Back to Top

7 Responses to CSS Position

  1. ดีเมนู

    คือ, ผมมือใหม่หนะครับ อ่านมาเรื่อยๆ แต่แรก

    ตอนนี้งง ตรง -1 หนครับ

    งงว่าทำไมต้องมี -1 ติดอยู่ด้วยครับ :)

    ขอบคุณครับ

    Reply

  2. KRISS

    @ดีเมนู

    นั่นเป็นแค่ชื่อ class เฉยๆครับ

    <div class=”relative-1” >

    จะเขียน relative-2 หรือ 3 หรือ 4 ก็ได้ไม่ว่ากัน

    ขอให้ใน css อ้างถูก class ครับ

    Reply

  3. ดีเมนู

    ขอบคุณครับ :D

    ก็คือแล้วแต่เราจะตั้งชื่อใช่หรือเปล่าครับ?

    <div class=”testetet” >

    ก็ได้หรือเปล่าครับ?

    Reply

  4. KRISS

    เข้าใจถูกแล้วขรับ

    @ดีเมนู

    แต่ก็ควรจะมีหลักการตั้งหน่อยนะครับ

    (จริงๆก็หลักใครหลักมันแหละ ขออย่างเดียว ยึดให้มั่นๆ เปลี่ยนไปมาเดี๋ยวงง)

    Reply

  5. ดีเมนู

    ขอบคุณครับผม :D

    คราวนี้จะได้อ่านหัวข้อต่อไปครับ ^^

    Reply

  6. ครูน็อต

    อันนี้ผิดเปล่าครับหรือตั้งใจ

     
    <div class=\"relative-1\">

     
    ทดสอบลักษณะการแสดงผลของง position relative

     
    <div class=\"absolute-1\">

     
    ตัวนี้ absolute

     
    </div>

     
    </div>

    Reply

  7. A

    กำลังศึกษาเรื่อง CSS ค่ะ ขอบคุณมากนะคะ ที่ให้ความรู้

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top