Home > เริ่มต้นกับ CSS > จัดตำแหน่งด้วย position

จัดตำแหน่งด้วย position

property? position เป็นอีกตัวหนึ่งที่เราจะใช้กำหนดตำแหน่ง layout แต่ จะสามารถ กำหนด ได้ละเอียดกว่า การใช้ float?เพราะเมื่อเรากำหนด position แล้ว สิ่งที่จะต้องกำหนดตามมาก็คือค่า left, right, top ,bottom ?มาดูกันว่ามีอะไรบ้างและใช้อย่างไร

1. position:static

เป็น default ของ position ถ้าไม่ใส่อะไร ก็จะถือว่า มีค่าเป็น static? ก็คือไม่มี position น่ะแหละ??พูดตามตรงไม่เคยใช้เลยตัวนี้? แต่มันมีก็เลยต้องอธิบายว่ามันคืออะไร ;)

2. position:fixed

เอาไว้ fixd ให้ อยู่ตรงไหนก็ได้ของ เบราเซอร์ โดยใส่ค่า left, right, top ,bottom หากใส่ ค่า left:10px; top:100px วัตถุที่ถูกกำนดก็จะ อยู่ถัดจากขอบเบราเซอร์ด้านซ้าย 10px? ถัดจากด้านบนลงมา 100 px ข้อดีคือ เมื่อเราเลื่อน Scroll bar ลงมา มันก็จะยังคงอยู่ตรงตำแหน่งนั้นไม่หายไปไหน มันตามเรามาทุกที่?ว่าง่ายๆ แต่? property นี้ ใช้ได้กับ เบราเซอร์ใหม่ๆ อย่าง IE7, Firefox2.0 (1.5 ไม่ได้ลอง)? ส่วน IE6 ไม่เกิดผลใดๆ ดังนั้น ยังไม่ควรนำมาใช้ครับ [-x

3. position:absolute

เหมือนแบบ fixed ครับ แต่เลื่อน Scroll bar แล้วหายไปตามการเลื่อนครับ กำหนดตำแหน่งต่างๆ ด้วยค่า left, right, top ,bottom เช่นกัน

จากโค้ด css
<style type=”text/css”>
.aa{position:absolute; right:10px; top:10px; width:150px; height:100px; background:#CCCCCC;}
</style>

และ html
<div class=”aa”>div class=”aa”</div>

จะได้

position absolute

อยู่ด้านบนขวาของ เบราเซอร์

4. position:relative

เมื่อกำหนดเป็น relative จะสามารถใส่ค่า? left, right, top ,bottom ได้เช่นกัน แต่จะอ้างอิงจากจุดที่ตัวมันเองอยู่ ไม่ได้อ้างอิงจากขอบเบราเซอร์

จากโค้ด css
<style type=”text/css”>
.aa{width:150px; height:100px; background:#CCCCCC;}
.bb{width:150px; height:100px; background:#FFCC00}
</style>

และ html
<div class=”aa”>div class=”aa”</div>
<div class=”bb”>div class=”bb”</div>

จะได้

position static

ใส่ absolute ให้ bb

.bb{position:absolute; left:50px; top:70px; width:150px; height:100px; background:#FFCC00}

จะได้

absolute left top

ใส่ relativeให้ bb

.bb{position:relative; left:20px; top:30px; width:150px; height:100px; background:#FFCC00}

จะได้

position relative

5. relative + absolute

อย่างที่เห็นว่า absolute จะ อ้างอิงกับขอบของเบราเซอร์ แต่เราจะให้มันอ้างอิง กับขอบของ div ตัวนอก โดยการใช้สูตร ด้านนอก relative ด้านใน absolute

จากโค้ด css
<style type=”text/css”>
.aa{position:relative;width:200px; height:250px; background:#CCCCCC;}
.bb{position:absolute; right:10px; bottom:10px; width:100px; height:30px; background:#FFCC00}
</style>

และ html
<div class=”aa”>ตัวนอก ralative???????
???????? <div class=”bb”>ตัวใน absolute</div>
</div>

จะได้

relative+absolute

นำมาใช้ทำปุ่ม moreinfo? หรือ อ่านต่อคลิกที่นี่ ได้โดยไม่ต้อง มี td หรืออะไรมาดัน ไม่ว่าเนื้อหาสั้นยาว ก็ไม่เสียตำแหน่งครับ

6.ประยุกต์ใช้ relative

ทำกล่องสมัครสมาชิก

จากโค้ด css
<style type=”text/css”>
.aa{position:relative;width:200px; height:150px; border:#CCCCCC solid 1px;}
.bb{position:absolute; right:5px; bottom:5px; width:130px; height:20px;}
.register{position:relative; left:5px; top:-20px; width:190px; height:50px; background:url(register_now_eng.gif) no-repeat}
</style>

และ html
<div class=”aa”>
???????? <div class=”register”></div>
???????? <p>เจ้าข้าเอ๊ย มาสมัครสมาชิกกันเร้ววววว </p>
???????? <div class=”bb”><a href=”#” mce_href=”#”>สมัครด่วน คลิกที่นี่</a></div>
</div>

จะได้

register now
จริงๆแล้ว ตรงกราฟฟิคคำว่า register now จะต้องอยู่ในกรอบ แต่เราใช้ position:relative แล้วกำหนด top:-20px ทำให้รูปเลื่อนขึ้นไปอยู่บนเส้นด้านบนนะ

****จบครับ หวังว่าคงจะเข้าใจ การใช้ position กันมากขึ้นนะ <:-p

Related Articles


About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. May 6th, 2007 at 20:42 | #1

    ได้สิ่งใหม่ๆ ไปใช้อีกแล้ว….
    Thank!

  2. May 8th, 2007 at 12:29 | #2

    อืม.. แหล่มคับ !! /:)

  3. May 10th, 2007 at 19:14 | #3

    ยอดมากฮะ ยิ่งสำสหรับการใช้ absolute relative เนี่ย นึกไม่ถึงเลยจริงๆฮะ

    :-?

  4. XaGa
    May 16th, 2007 at 11:20 | #4

    สุดยอดครับ หาเว็บแนะนำcss ของไทยแบบนี้ ไม่ค่อยมี มีไอเดียใหม่ๆเยอะมากเลย:d

  5. Jim
    September 23rd, 2007 at 14:35 | #5

    สุดยอดเลย ปรบมือให้ หาสิ่งดีๆ มาพัฒนาอีกนะครับ

  6. ongsa
    May 20th, 2008 at 13:08 | #6

    ดีครับ ผมไม่ค่อยเห็นเว็บอธิบายได้ดีเท่านี้เลย
    ผมเป็นคนหนึ่งล่ะครับ ที่พยายามจะมาใช้ CSS แต่ไม่มีความรู้เลย
    ก็เลยยังต้องสลับการใช้ Table กับ CSS ง่ายๆ บางที
    ถ้ามีเนื้อหาดีๆ อย่างนี้ ต้องสนับสนุนครับ

  7. nu
    July 21st, 2008 at 20:06 | #7

    ขอบคุณมากครับ สำหรับความรู้ไว้จะเข้ามาอ่านหาความรู้เพิ่มเติมอีกนะครับ

  8. Bloodeye
    October 17th, 2008 at 19:01 | #8

    ดีจังคับ ความรู้ online ผมนั่งอ่านทั้งวัน เขียนพอเป็นบ้างแล้วคับ
    จากที่ตัวเองไม่เคยเป็น CSS มาก่อนเลย

    ทำเป็นแต่ HTML,ASP.NET
    ตานี้ ได้คามรุ้ CSS แล้ว แหลมไปเลยคับ

    นั่งอ่อนทั้งวันยังไม่หมดเลย

    ขอบพระคุณ เป็นอย่างสูง จงทำต่อไปคับ จะเป็นกำลังใจให้
    **************ท่านอาจารย์******************

    ขอฝากตัวเป็นลูกศิษย์ ได้ป่าวคับ เหอะ ๆ blood.eye@hotmail.com

  9. November 2nd, 2008 at 01:22 | #9

    สุดยอดเลยค่ะ รอติดตามผลงานอยู่นะคะ

  10. oesakofc
    March 19th, 2009 at 11:53 | #10

    มาเก็บเกี่ยวครับ ตัวอย่างดีมากเลย
    เข้าใจได้ง่าย
    ขอบคุณมากครับ:d:)>-:x

  11. Frank
    March 21st, 2009 at 16:00 | #11

    ขอบคุณครับ ซึ้ง T-T

  12. March 26th, 2009 at 14:33 | #12

    ขอบคุณครับ

  13. เจ๋งครับ
    March 28th, 2009 at 14:58 | #13

    เจ๋งครับ เข้าใจมากขึ้น :)>-

  14. April 2nd, 2009 at 13:33 | #14

    ได้ประโยชน์จริงๆครับขอบใจจ้า :d/

  15. Newbie
    May 7th, 2009 at 09:47 | #15

    Thx mak mak:)>-:d

  16. KOft
    May 14th, 2009 at 00:36 | #16

    A very good article with a nice and clear example.

    I admire you that you share an idea despite it’s basic but almost everyone skip it and keeping ask this stuff in the forum.

    Great work, man.:-?

  17. August 30th, 2009 at 20:40 | #17

    เป็นประโยชน์มากๆ เลยขอบคุณครับ

  18. วีระชาติ
    September 4th, 2009 at 09:47 | #18

    ขอบคุณมากครับ อยากรู้วิธีการทำแบบนี้มานานแล้ว :)

  19. ping
    October 28th, 2009 at 16:55 | #19

    ชอบมากๆ เลยย

    ขอบพระคุณมากๆๆๆ ค่ะ

    หนูจะพยายามศึกษาอย่างเต็มที่ ^^

  20. December 6th, 2009 at 13:47 | #20

    ความรู้แบบนี้ชอบจริงๆ

  21. December 6th, 2009 at 13:48 | #21

    Thank you for good information

  22. xman2548
    December 28th, 2009 at 22:00 | #22

    ผมขอบคุณมากเลย ครับ
    พอดีผมหาแถวตายว่าผมจะใช้งานยังไงกับแผ่นที่
    พอมาอ่าน ส่วน relative absolute
    ช่วยชีวิตผมมากเลย
    …..ขอบคุณมากครับ:d

  23. April 4th, 2010 at 14:46 | #23

    เป็นบทความที่ดีมากครับ

  24. April 19th, 2010 at 15:15 | #24

    เคยหาอ่านบทความภาษาอังกฤษตามเว็บไซต์เมืองนอก อ่านแล้วก็งงๆ ไม่ค่อยเข้าใจเท่าไหร่

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

    ขอบคุณจากใจครับ
    วิท (http://www.tutorpoint.net)

  25. Sanchai
    June 11th, 2010 at 22:37 | #25

    สุดยอดครับ กำลังงงๆ กับเรื่องนี้อยู่พอดีเลยครับ
    มาอ่าน post นี้ ซึ้งเลย
    มีภาพประกอบอธิบายชัดเจนมาก
    ขอบคุณมากๆ ครับ :)

  26. July 5th, 2010 at 22:55 | #26

    ขอบคุณคับ เป็นประโยชน์มากเลย

  27. July 5th, 2010 at 22:56 | #27

    ขอบใจจิงๆนะ

    เป้ (www.tutortopcu.com)

  28. September 10th, 2010 at 11:32 | #28

    เพิ่งเข้าใจนะ เพิ่งเจ้าใจ วันนี้เพิ่งเข้าใจ ………

  29. September 12th, 2010 at 10:24 | #29

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

  30. November 25th, 2010 at 11:48 | #30

    ขอบคุณครับ…:x

  31. December 4th, 2010 at 04:39 | #31

    เหอะ…แจ่มครับ..

  32. tadragsa
    December 8th, 2010 at 22:50 | #32

    ขอบคุณสำหรับข้อมูล คะ

  33. TOMY
    January 16th, 2011 at 11:44 | #33

    จัดหน้าแรกใช้วิธีนี้ได้ใช่ป่าวครับ

  34. January 16th, 2011 at 23:42 | #34

    ทำได้ครับผมใช้ประจำ :)

  35. January 20th, 2011 at 20:47 | #35

    ขอบคุณมากครับ ไม่เคยใช้วิธีเลย นึกอะไรได้ก็ยัดลงเมนบอดี้หมด 55+ คงต้องหัดอีกนานกว่าจะชินกับมัน ^ ^

  36. February 5th, 2011 at 12:09 | #36

    อยากได้ตัวอย่าง การจัดรูปแบบ css 2 คอลั่ม อะครับ ต้องใช้โค้ดไหน

  37. yim
    March 22nd, 2011 at 18:26 | #37

    ขอบคุณมากครับ กำลังติดปัญหานี้อยู่พอดีครับ :)

  38. April 3rd, 2011 at 11:34 | #38

    นี่ใช้จัดตำแหน่งโดยบน browser เป็นหลักช่ายป่ะครับ แล้วเราจัด position บนเนื้อหาของความได้ป่ะครับ

  39. April 4th, 2011 at 12:31 | #39

    ได้ครับ แต่ปกติจะใช้ กับ layout ครับ

  40. June 11th, 2011 at 17:37 | #40

    ขอบคุณมากครับ ขอรับความรู้ไปนะครับ มีประโยชน์มาก

  41. March 17th, 2012 at 01:31 | #41

    ผมอ่านใน w3schools บอกตรงๆ ก็ยังงงกับ relative กับ absolute อยู่
    พอมาอ่านบทความนี้เลยถึงบางอ้อเลย สุดยอดจริงๆ

  42. ชันย์
    April 24th, 2012 at 14:41 | #42

    สาระดีจริง ๆ อธิบายเข้าใจง่าย และ มีตัวอย่างประกอบ เจ๋งจริงๆ คัฟ

  1. September 29th, 2012 at 23:30 | #1