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

จัดตำแหน่งด้วย 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>

จะได้

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

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 ทำให้รูปเลื่อนขึ้นไปอยู่บนเส้นด้านบน

special thank: http://www.divland.com/blog/2007/05/06/position/