จัดตำแหน่งด้วย 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 กันมากขึ้นนะ <

Related Articles

• เรียนรู้การใช้ ul li step by step (28)
• เขียน css อย่างสั้น ง่ายๆ โหลดไวๆ (15)
• มารู้จักกับ xhtml กันก่อน (4)
• พื้นฐาน กับ CSS Box Model (16)
• ทำกล่องขอบโค้งด้วย css (15)