Website AB191 update story
CSS
Of
CSS
CSS : ใช้งาน Position กันอย่างไร
Saturday, November 23, 2013 Story at now !!!
ทำงานกับ CSS มาซักพัก น่าจะได้พบเจอกับ Position กันบ้าง แต่เข้าใจการใช้งานมันกันขนาดไหน เอาเป็นว่า เรามาทำความเข้าใจไปด้วยกันเลยนะครับ
CSS : Position นั้นมีอะไรบ้าง
- static
- relative
- absolute
- fixed
- inherit
คราวนี้ผมจะลองเขียน Code แบบนี้นะครับ
2 | < div id = "div-1" >div-1</ div > |
4 | < div id = "div-a" >div-a</ div > |
5 | < div id = "div-b" >div-b</ div > |
6 | < div id = "div-c" >div-c</ div > |
8 | < div id = "div-3" >div-3</ div > |
1 | div { padding : 20px ; color : #FFF ;} |
3 | #div -1 { background : #000 ;} |
4 | #div -2 { background : #C0C ;} |
5 | #div -3 { background : #666 ;} |
6 | #div-a { background : #339 ;} |
7 | #div-b { background : #66C ;} |
8 | #div-c { background : #99F ;} |
ซึ่งจะแสดงผลดังรูป
จาก Code ที่เขียน เราจะได้เว็บดังรูป
Position : static
position : static นั้นถือเป็นค่าเริ่มต้นสำหรับ position เลย ดังนั้นเราจะตั้งค่า position หรือไม่ ค่า position ก็จะเป็น static อยู่แล้ว แต่ผมจะลองใส่ค่าให้ดูเป็นตัวอย่างว่า เว็บจะแสดงผลออกมาเป็นแบบไหน
1 | #div-a { background : #339 ; position : static ;} |
ผลลัพธ์จากการตั้ง #div-a ด้วย position:static
จะเห็นว่าไม่มีความเปลี่ยนแปลงใด ๆ เนื่องจากอย่างที่ได้กล่าวไว้ เพราะค่า position นั้น มีค่าเริ่มต้นเป็น static อยู่แล้ว static
Position : relative
position : relative นั้นจะมีลักษณะคล้าย ๆ กับ static ต่างกันตรงที่ relative นั้น เราสามารถใช้ top left bottom right ในการกำหนดตำแหน่งได้
1 | #div-a { background : #339 ; position : relative ;} |
position : relative ที่ยังไม่ได้กำหนดตำแหน่ง แสดงผลออกมาเหมือนกับ position : static
คราวนี้เรามากำหนดตำแหน่งให้มันกัน โดยตำแหน่งที่ระบุไป จะเริ่มต้นนับจาก element ที่อยู่ก่อนหน้า เรามาลองกับ #div-2 นะครับ น่าจะเห็นผลชัดเจนกว่า
1 | #div -2 { background : #C0C ; position : relative ; top : 30px ; left : -20px } |
2 | #div-a { background : #339 ;} |
#div-2 จะห่างจาก #div-1 ตามที่กำหนดไว้
จะเห็นว่าตอนนี้ การแสดงผลของ relative ไม่เหมือนกับ static แล้ว โดย #div-2 นั้นจะขยับตัวเองจากด้านบนลงมา 30 pixels และขยับตัวเองจากด้านซ้ายไปทางซ้าย 20 pixels
1 | #div -2 { background : #C0C ; position : relative ; bottom : 10px ; right : 20px ;} |
ตำแหน่งเปลี่ยนไปจากครั้งที่แล้ว หลังเราเปลี่ยนค่า
คราวนี้เราจะเห็นว่า #div-2 นั้นจะขยับตัวเองจากด้านล่างขึ้นมา 10 pixels และขยับตัวเองจากด้านขวาไปทางซ้าย 20 pixels
Position : absolute
position : absolute นั้นจะไม่สนใจ element ก่อนหน้า และจะพาตัวเองไปยังจุดนั้นเลย
1 | #div -2 { background : #C0C ; position : absolute ; top : 0px ; right : 0px ;} |
ตอนนี้ #div-2 ไปอยู่ที่ตำแหน่งด้านบนสุด ด้านขวาสุดแล้ว
ต่อมาเรามาลองใช้ position : absolute กับ #div-b บ้างนะ
1 | #div -2 { background : #C0C ;} |
2 | #div-b { background : #66C ; position : absolute ; top : 0px ; right : 0px ;} |
จะเห็นว่า #div-b ไปอยู่ด้านบนขวา
ใช้ Position : relative คู่กับ Position : absolute
แล้วถ้าเราอยากให้ #div-b มาอยู่ในกรอบ #div-2 ก็ทำได้โดยการใส่ position : relative ให้ #div-2 เหมือนเป็นการกำหนดกรอบให้มัน
1 | #div -2 { background : #C0C ; position : relative ;} |
2 | #div-b { background : #66C ; position : absolute ; top : 0px ; right : 0px ;} |
#div-b จะอยู่ด้านบนขวาสุดของ #div-2
Position : fixed
position : fixed นั้นทำหน้าที่คล้าย absolute เลย แต่มีแตกต่างกันที่ fixed นั้นจะใช้กับ relative เพื่อกำหนดกรอบของมันไม่ได้ และจะตรึงตัวเองอยู่ตรงนั้นเสมอ ดูตัวอย่างน่าจะเข้าใจง่ายกว่าครับ อย่างเช่น
Absolute
1 | div { padding : 20px ; color : #FFF ;} |
2 | #wrapper { width : 400px ; height : 2000px ;} |
3 | #div -1 { background : #000 ;} |
4 | #div -2 { background : #C0C ;} |
5 | #div -3 { background : #666 ;} |
6 | #div-a { background : #339 ;} |
7 | #div-b { background : #66C ; position : absolute ; top : 0px ; right : 0px ;} |
8 | #div-c { background : #99F ;} |
Position : absolute
เมื่อทำการ scroll ลงมา #div-b จะไม่ได้ขยับตามลงมา และหายไป
#div-b หายไปจากการ scroll ลงมา
Fixed
แต่ถ้าเป็น position : fixed แล้ว มันจะตรึงตัวเองอยู่กับที่ ไม่ว่าจะ scroll ลงมายังไง มันก็จะอยู่ที่ตำแหน่งนั้น
#div-b ไม่ขยับไปไหน
รูปแบบการใช้ Position ก็มีคร่าว ๆ ประมาณนี้ ลองนำไปประยุกต์ใช้กับงานที่ทำอยู่นะครับ
Update Story at Saturday, November 23, 2013 In Category
CSS
Story
CSS
CSS : ใช้งาน Position กันอย่างไร