จัดตำแหน่งด้วย 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 ไม่เกิดผลใดๆ ดังนั้น ยังไม่ควรนำมาใช้ครับ 
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>
จะได้
อยู่ด้านบนขวาของ เบราเซอร์
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>
จะได้
ใส่ absolute ให้ bb
.bb{position:absolute; left:50px; top:70px; width:150px; height:100px; background:#FFCC00}
จะได้
ใส่ relativeให้ bb
.bb{position:relative; left:20px; top:30px; width:150px; height:100px; background:#FFCC00}
จะได้
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>
จะได้
นำมาใช้ทำปุ่ม 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 จะต้องอยู่ในกรอบ แต่เราใช้ position:relative แล้วกำหนด top:-20px ทำให้รูปเลื่อนขึ้นไปอยู่บนเส้นด้านบนนะ
****จบครับ หวังว่าคงจะเข้าใจ การใช้ position กันมากขึ้นนะ <
>-
(
NGS said,
พฤษภาคม 6, 2007 @ 8:42 pm
ได้สิ่งใหม่ๆ ไปใช้อีกแล้ว….
Thank!
HaMoo said,
พฤษภาคม 8, 2007 @ 12:29 pm
อืม.. แหล่มคับ !!
lunakizz said,
พฤษภาคม 10, 2007 @ 7:14 pm
ยอดมากฮะ ยิ่งสำสหรับการใช้ absolute relative เนี่ย นึกไม่ถึงเลยจริงๆฮะ
XaGa said,
พฤษภาคม 16, 2007 @ 11:20 am
สุดยอดครับ หาเว็บแนะนำcss ของไทยแบบนี้ ไม่ค่อยมี มีไอเดียใหม่ๆเยอะมากเลย
Jim said,
กันยายน 23, 2007 @ 2:35 pm
สุดยอดเลย ปรบมือให้ หาสิ่งดีๆ มาพัฒนาอีกนะครับ
ongsa said,
พฤษภาคม 20, 2008 @ 1:08 pm
ดีครับ ผมไม่ค่อยเห็นเว็บอธิบายได้ดีเท่านี้เลย
ผมเป็นคนหนึ่งล่ะครับ ที่พยายามจะมาใช้ CSS แต่ไม่มีความรู้เลย
ก็เลยยังต้องสลับการใช้ Table กับ CSS ง่ายๆ บางที
ถ้ามีเนื้อหาดีๆ อย่างนี้ ต้องสนับสนุนครับ
nu said,
กรกฎาคม 21, 2008 @ 8:06 pm
ขอบคุณมากครับ สำหรับความรู้ไว้จะเข้ามาอ่านหาความรู้เพิ่มเติมอีกนะครับ
Bloodeye said,
ตุลาคม 17, 2008 @ 7:01 pm
ดีจังคับ ความรู้ online ผมนั่งอ่านทั้งวัน เขียนพอเป็นบ้างแล้วคับ
จากที่ตัวเองไม่เคยเป็น CSS มาก่อนเลย
ทำเป็นแต่ HTML,ASP.NET
ตานี้ ได้คามรุ้ CSS แล้ว แหลมไปเลยคับ
นั่งอ่อนทั้งวันยังไม่หมดเลย
ขอบพระคุณ เป็นอย่างสูง จงทำต่อไปคับ จะเป็นกำลังใจให้
**************ท่านอาจารย์******************
ขอฝากตัวเป็นลูกศิษย์ ได้ป่าวคับ เหอะ ๆ blood.eye@hotmail.com
Nong said,
พฤศจิกายน 2, 2008 @ 1:22 am
สุดยอดเลยค่ะ รอติดตามผลงานอยู่นะคะ
oesakofc said,
มีนาคม 19, 2009 @ 11:53 am
มาเก็บเกี่ยวครับ ตัวอย่างดีมากเลย
เข้าใจได้ง่าย
ขอบคุณมากครับ
Frank said,
มีนาคม 21, 2009 @ 4:00 pm
ขอบคุณครับ ซึ้ง T-T
แชท said,
มีนาคม 26, 2009 @ 2:33 pm
ขอบคุณครับ
เจ๋งครับ said,
มีนาคม 28, 2009 @ 2:58 pm
เจ๋งครับ เข้าใจมากขึ้น
joomla said,
เมษายน 2, 2009 @ 1:33 pm
ได้ประโยชน์จริงๆครับขอบใจจ้า
/
Newbie said,
พฤษภาคม 7, 2009 @ 9:47 am
Thx mak mak
KOft said,
พฤษภาคม 14, 2009 @ 12:36 am
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.
Song said,
สิงหาคม 30, 2009 @ 8:40 pm
เป็นประโยชน์มากๆ เลยขอบคุณครับ
วีระชาติ said,
กันยายน 4, 2009 @ 9:47 am
ขอบคุณมากครับ อยากรู้วิธีการทำแบบนี้มานานแล้ว
ping said,
ตุลาคม 28, 2009 @ 4:55 pm
ชอบมากๆ เลยย
ขอบพระคุณมากๆๆๆ ค่ะ
หนูจะพยายามศึกษาอย่างเต็มที่ ^^
โหลดเพลงใหม่ said,
ธันวาคม 6, 2009 @ 1:47 pm
ความรู้แบบนี้ชอบจริงๆ
โหลดเพลงmp3ฟรี said,
ธันวาคม 6, 2009 @ 1:48 pm
Thank you for good information
xman2548 said,
ธันวาคม 28, 2009 @ 10:00 pm
ผมขอบคุณมากเลย ครับ
พอดีผมหาแถวตายว่าผมจะใช้งานยังไงกับแผ่นที่
พอมาอ่าน ส่วน relative absolute
ช่วยชีวิตผมมากเลย
…..ขอบคุณมากครับ