จัดตำแหน่งด้วย position
May 6th
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 ทำให้รูปเลื่อนขึ้นไปอยู่บนเส้นด้านบนนะ
****จบครับ หวังว่าคงจะเข้าใจ การใช้ position กันมากขึ้นนะ <:-p
ได้สิ่งใหม่ๆ ไปใช้อีกแล้ว….
Thank!
อืม.. แหล่มคับ !! /:)
ยอดมากฮะ ยิ่งสำสหรับการใช้ absolute relative เนี่ย นึกไม่ถึงเลยจริงๆฮะ
:-?
สุดยอดครับ หาเว็บแนะนำcss ของไทยแบบนี้ ไม่ค่อยมี มีไอเดียใหม่ๆเยอะมากเลย:d
สุดยอดเลย ปรบมือให้ หาสิ่งดีๆ มาพัฒนาอีกนะครับ
ดีครับ ผมไม่ค่อยเห็นเว็บอธิบายได้ดีเท่านี้เลย
ผมเป็นคนหนึ่งล่ะครับ ที่พยายามจะมาใช้ CSS แต่ไม่มีความรู้เลย
ก็เลยยังต้องสลับการใช้ Table กับ CSS ง่ายๆ บางที
ถ้ามีเนื้อหาดีๆ อย่างนี้ ต้องสนับสนุนครับ
ขอบคุณมากครับ สำหรับความรู้ไว้จะเข้ามาอ่านหาความรู้เพิ่มเติมอีกนะครับ
ดีจังคับ ความรู้ online ผมนั่งอ่านทั้งวัน เขียนพอเป็นบ้างแล้วคับ
จากที่ตัวเองไม่เคยเป็น CSS มาก่อนเลย
ทำเป็นแต่ HTML,ASP.NET
ตานี้ ได้คามรุ้ CSS แล้ว แหลมไปเลยคับ
นั่งอ่อนทั้งวันยังไม่หมดเลย
ขอบพระคุณ เป็นอย่างสูง จงทำต่อไปคับ จะเป็นกำลังใจให้
**************ท่านอาจารย์******************
ขอฝากตัวเป็นลูกศิษย์ ได้ป่าวคับ เหอะ ๆ blood.eye@hotmail.com
สุดยอดเลยค่ะ รอติดตามผลงานอยู่นะคะ
มาเก็บเกี่ยวครับ ตัวอย่างดีมากเลย
เข้าใจได้ง่าย
ขอบคุณมากครับ:d:)>-:x
ขอบคุณครับ ซึ้ง T-T
ขอบคุณครับ
เจ๋งครับ เข้าใจมากขึ้น :)>-
ได้ประโยชน์จริงๆครับขอบใจจ้า :d/
Thx mak mak:)>-:d
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.:-?
เป็นประโยชน์มากๆ เลยขอบคุณครับ
ขอบคุณมากครับ อยากรู้วิธีการทำแบบนี้มานานแล้ว :)
ชอบมากๆ เลยย
ขอบพระคุณมากๆๆๆ ค่ะ
หนูจะพยายามศึกษาอย่างเต็มที่ ^^
ความรู้แบบนี้ชอบจริงๆ
Thank you for good information
ผมขอบคุณมากเลย ครับ
พอดีผมหาแถวตายว่าผมจะใช้งานยังไงกับแผ่นที่
พอมาอ่าน ส่วน relative absolute
ช่วยชีวิตผมมากเลย
…..ขอบคุณมากครับ:d
เป็นบทความที่ดีมากครับ
เคยหาอ่านบทความภาษาอังกฤษตามเว็บไซต์เมืองนอก อ่านแล้วก็งงๆ ไม่ค่อยเข้าใจเท่าไหร่
วันนี้ได้มาอ่านฉบับภาษาไทย บอกได้คำเดียวว่าสุดยอดเลยครับ เข้าใจง่าย มีตัวอย่างประกอบ มีรูปภาพให้ดู เน้นสีสันสวยงาม ไม่รู้จะขอบคุณอย่างไรดีนะครับ รู้สึกดีใจที่มีคนนำมาแบ่งปันแบบนี้ ดูๆแล้ว เว็บไซต์ให้ความรู้แบบนี้ในไทยยังไม่มีเลย น้อยมากๆ มีก็แบบงูๆปลาๆ จะไปเสียเงินเรียนก็แพงแสนแพง แล้วก็ไม่รู้จะสอนดีรึปล่าวด้วย แต่ที่นี่สอนฟรี แถมสอนดีด้วย
ขอบคุณจากใจครับ
วิท (http://www.tutorpoint.net)
สุดยอดครับ กำลังงงๆ กับเรื่องนี้อยู่พอดีเลยครับ
มาอ่าน post นี้ ซึ้งเลย
มีภาพประกอบอธิบายชัดเจนมาก
ขอบคุณมากๆ ครับ :)
ขอบคุณคับ เป็นประโยชน์มากเลย
ขอบใจจิงๆนะ
เป้ (www.tutortopcu.com)
เพิ่งเข้าใจนะ เพิ่งเจ้าใจ วันนี้เพิ่งเข้าใจ ………
ขอบคุณครับ :)
ขอบคุณครับ…:x
เหอะ…แจ่มครับ..
ขอบคุณสำหรับข้อมูล คะ
จัดหน้าแรกใช้วิธีนี้ได้ใช่ป่าวครับ
ทำได้ครับผมใช้ประจำ :)
ขอบคุณมากครับ ไม่เคยใช้วิธีเลย นึกอะไรได้ก็ยัดลงเมนบอดี้หมด 55+ คงต้องหัดอีกนานกว่าจะชินกับมัน ^ ^
อยากได้ตัวอย่าง การจัดรูปแบบ css 2 คอลั่ม อะครับ ต้องใช้โค้ดไหน
ขอบคุณมากครับ กำลังติดปัญหานี้อยู่พอดีครับ :)
นี่ใช้จัดตำแหน่งโดยบน browser เป็นหลักช่ายป่ะครับ แล้วเราจัด position บนเนื้อหาของความได้ป่ะครับ
ได้ครับ แต่ปกติจะใช้ กับ layout ครับ
ขอบคุณมากครับ ขอรับความรู้ไปนะครับ มีประโยชน์มาก
ผมอ่านใน w3schools บอกตรงๆ ก็ยังงงกับ relative กับ absolute อยู่
พอมาอ่านบทความนี้เลยถึงบางอ้อเลย สุดยอดจริงๆ
สาระดีจริง ๆ อธิบายเข้าใจง่าย และ มีตัวอย่างประกอบ เจ๋งจริงๆ คัฟ