Tag: position

CSS : ใช้งาน Position กันอย่างไร
ทำงานกับ CSS มาซักพัก น่าจะได้พบเจอกับ Position กันบ้าง แต่เข้าใจการใช้งานมันกันขนาดไหน เอาเป็นว่า เรามาทำความเข้าใจไปด้วยกันเลยนะครับ

CSS : Position นั้นมีอะไรบ้าง
- static
- relative
- absolute
- fixed
- inherit
คราวนี้ผมจะลองเขียน Code แบบนี้นะครับ
```
<div id="wrapper">
  <div id="div-1">div-1</div>
    <div id="div-2">
      <div id="div-a">div-a</div>
      <div id="div-b">div-b</div>
      <div id="div-c">div-c</div>
    </div>
  <div id="div-3">div-3</div>
</div>
```
```
div {
  padding: 20px;
  color: #FFF;
}

#wrapper {
  width: 400px;
}

#div-1 {
  background: #000;
}

#div-2 {
  background: #C0C;
}

#div-3 {
  background: #666;
}

#div-a {
  background: #339;
}

#div-b {
  background: #66C;
}

#div-c {
  background: #99F;
}
```
ซึ่งจะแสดงผลดังรูป

จาก Code ที่เขียน เราจะได้เว็บดังรูป

Position : static

position : static นั้นถือเป็นค่าเริ่มต้นสำหรับ position เลย ดังนั้นเราจะตั้งค่า position หรือไม่ ค่า position ก็จะเป็น static อยู่แล้ว แต่ผมจะลองใส่ค่าให้ดูเป็นตัวอย่างว่า เว็บจะแสดงผลออกมาเป็นแบบไหน
```
#div-a {
  background: #339;
  position: static;
}
```
ผลลัพธ์จากการตั้ง #div-a ด้วย position:static

จะเห็นว่าไม่มีความเปลี่ยนแปลงใด ๆ เนื่องจากอย่างที่ได้กล่าวไว้ เพราะค่า position นั้น มีค่าเริ่มต้นเป็น static อยู่แล้ว static

Position : relative

position : relative นั้นจะมีลักษณะคล้าย ๆ กับ static ต่างกันตรงที่ relative นั้น เราสามารถใช้ top left bottom right ในการกำหนดตำแหน่งได้
```
#div-a {
  background: #339;
  position: relative;
}
```
position : relative ที่ยังไม่ได้กำหนดตำแหน่ง แสดงผลออกมาเหมือนกับ position : static

คราวนี้เรามากำหนดตำแหน่งให้มันกัน โดยตำแหน่งที่ระบุไป จะเริ่มต้นนับจาก element ที่อยู่ก่อนหน้า เรามาลองกับ #div-2 นะครับ น่าจะเห็นผลชัดเจนกว่า
```
#div-2 {
  background: #C0C;
  position: relative;
  top: 30px;
  left: -20px
}

#div-a {
  background: #339;
}
```
#div-2 จะห่างจาก #div-1 ตามที่กำหนดไว้

จะเห็นว่าตอนนี้ การแสดงผลของ relative ไม่เหมือนกับ static แล้ว โดย #div-2 นั้นจะขยับตัวเองจากด้านบนลงมา 30 pixels และขยับตัวเองจากด้านซ้ายไปทางซ้าย 20 pixels
```
#div-2 {
  background: #C0C;
  position: relative;
  bottom: 10px;
  right: 20px;
}
```
ตำแหน่งเปลี่ยนไปจากครั้งที่แล้ว หลังเราเปลี่ยนค่า

คราวนี้เราจะเห็นว่า #div-2 นั้นจะขยับตัวเองจากด้านล่างขึ้นมา 10 pixels และขยับตัวเองจากด้านขวาไปทางซ้าย 20 pixels

Position : absolute

position : absolute นั้นจะไม่สนใจ element ก่อนหน้า และจะพาตัวเองไปยังจุดนั้นเลย
```
#div-2 {
  background: #C0C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
ตอนนี้ #div-2 ไปอยู่ที่ตำแหน่งด้านบนสุด ด้านขวาสุดแล้ว

ต่อมาเรามาลองใช้ position : absolute กับ #div-b บ้างนะ
```
#div-2 {
  background: #C0C;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
จะเห็นว่า #div-b ไปอยู่ด้านบนขวา

ใช้ Position : relative คู่กับ Position : absolute

แล้วถ้าเราอยากให้ #div-b มาอยู่ในกรอบ #div-2 ก็ทำได้โดยการใส่ position : relative ให้ #div-2 เหมือนเป็นการกำหนดกรอบให้มัน
```
#div-2 {
  background: #C0C;
  position: relative;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}
```
#div-b จะอยู่ด้านบนขวาสุดของ #div-2

Position : fixed

position : fixed นั้นทำหน้าที่คล้าย absolute เลย แต่มีแตกต่างกันที่ fixed นั้นจะใช้กับ relative เพื่อกำหนดกรอบของมันไม่ได้ และจะตรึงตัวเองอยู่ตรงนั้นเสมอ ดูตัวอย่างน่าจะเข้าใจง่ายกว่าครับ อย่างเช่น

Absolute
```
div {
  padding: 20px;
  color: #FFF;
}

#wrapper {
  width: 400px;
  height: 2000px;
}

#div-1 {
  background: #000;
}

#div-2 {
  background: #C0C;
}

#div-3 {
  background: #666;
}

#div-a {
  background: #339;
}

#div-b {
  background: #66C;
  position: absolute;
  top: 0px;
  right: 0px;
}

#div-c {
  background: #99F;
}
```
Position : absolute

เมื่อทำการ scroll ลงมา #div-b จะไม่ได้ขยับตามลงมา และหายไป

#div-b หายไปจากการ scroll ลงมา

Fixed

แต่ถ้าเป็น position : fixed แล้ว มันจะตรึงตัวเองอยู่กับที่ ไม่ว่าจะ scroll ลงมายังไง มันก็จะอยู่ที่ตำแหน่งนั้น

#div-b ไม่ขยับไปไหน

รูปแบบการใช้ Position ก็มีคร่าว ๆ ประมาณนี้ ลองนำไปประยุกต์ใช้กับงานที่ทำอยู่นะครับ
October 15, 2011
CSS : z-index ใช้งานอย่างไร

คนที่ศึกษา CSS มาซักพัก น่าจะเจอกับคำว่า z-index ครั้งนี้ผมจะมาแนะนำว่า z-index นั้นใช้ทำอะไรกันแน่ แล้วมันใช้งานอย่างไร

z-index

เริ่มต้นผมมี Code HTML กับ CSS แบบนี้นะครับ

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum rutrum metus, sed consequat lectus pharetra at. Morbi pulvinar egestas elementum. In viverra tristique vulputate. Pellentesque quis sapien tortor, ut consequat leo. Donec ac felis leo, quis vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Morbi mattis ultricies nibh eu semper. Suspendisse malesuada hendrerit sapien eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas commodo eleifend metus, eu sollicitudin mi gravida vel. Maecenas sodales vestibulum felis vel sodales. Praesent sed felis sem. Fusce tincidunt, odio vulputate commodo dapibus, justo tortor scelerisque eros, in aliquet mi erat at nibh. Pellentesque sed eros ligula, vel egestas lorem.</p>
</div>
[/html]

[css]
* {margin:0;padding:0;}
#wrapper {width:860px;margin:20px auto;padding:50px;border:3px solid #F66;}
[/css]

ซึ่งผลลัพธ์ที่ออกมาก็จะเป็นดังรูปนะครับ

ผลลัพธ์ที่แสดงใน Browser

คราวนี้ผมมีรูปริบบิ้นที่อยากจะให้มันอยู่ตรงมุมขวา

รูปริบบิ้นที่เราจะใช้

ผมก็เลยเพิ่ม Code เข้าไปแบบนี้

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum rutrum metus, sed consequat lectus pharetra at. Morbi pulvinar egestas elementum. In viverra tristique vulputate. Pellentesque quis sapien tortor, ut consequat leo. Donec ac felis leo, quis vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Morbi mattis ultricies nibh eu semper. Suspendisse malesuada hendrerit sapien eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas commodo eleifend metus, eu sollicitudin mi gravida vel. Maecenas sodales vestibulum felis vel sodales. Praesent sed felis sem. Fusce tincidunt, odio vulputate commodo dapibus, justo tortor scelerisque eros, in aliquet mi erat at nibh. Pellentesque sed eros ligula, vel egestas lorem.</p>
<div id="ribbon"></div> <!– เพิ่ม –>
</div>
[/html]

[css]
* {margin:0;padding:0;}
#wrapper {width:860px;margin:20px auto;padding:50px;border:3px solid #F66;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;} /** เพิ่ม **/
[/css]

ซึ่งเราจะได้ผลลัพธ์ออกมาเป็นแบบนี้

ผลลัพธ์ที่ได้ แต่เอ๊ะ ทำไมมันอยู่นอกกรอบ

แต่เอ๊ะ ทำไมริบบิ้นเราถึงอยู่นอกกรอบ เพราะว่า position:absolute ตอนนี้ยึดหน้าต่าง Browser ในการนับตำแหน่ง ซึ่งริบบิ้นจึงอยู่บนสุด ขวาสุดของหน้าต่าง ถ้าเราอยากให้อยู่ในกรอบ ลองใส่ position:relative ให้กับกรอบเราดิ

[css]
* {margin:0;padding:0;}
#wrapper {width:860px;margin:20px auto;padding:50px;border:3px solid #F66;/** เพิ่ม **/ position:relative;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;}
[/css]

ผลลัพธ์ที่ได้ริบบิ้นอยู่ในกรอบแล้ว

แล้วถ้าเกิดเราเจอปัญหาแบบนี้ละ สมมติผมลดขนาดกรอบลงนะครับ

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;}
[/css]

ทำไงดี ริบบิ้นทับตัวอักษร

อ้าว ริบบิ้นทับตัวอักษรตรงมุมด้านขวาบน

รู้จักกับ z-index

ก่อนจะใช้งาน z-index ให้นึกถึงคณิตศาสตร์สมัยมัธยม ที่มีกราฟ มีแกน x แกน y หน้าต่าง Browser ก็เหมือนกัน ที่มองเป็นแกน x แกน y

รู้จัก X กับ Y ก่อนมารู้จัก Z

แล้วแกน z อยู่ไหนละ ให้จิตนาการว่า แกน z ก็จะเป็นลูกศรพุ่งเข้ามาที่หน้าเรา ดังนั้นในกรณีที่ตัวอักษรโดนริบบิ้นทับอยู่นั้น ก็เพราะว่ามันถูกจัดใน z-index ที่ต่ำกว่า ถ้าแบบนี้เรามากำหนด z-index ให้มันดีกว่า

เริ่มต้นใช้งาน z-index

ถ้าแบบนี้ เรากำหนดให้ tag <p> มี z-index มากกว่าริบบิ้นแล้วกัน

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;z-index:2;}
p {z-index:5;}
[/css]

ผลลัพธ์ที่ได้ออกมาก็จะเป็นแบบนี้

อ้าว เวรกรรม ทำไมมันเหมือนเดิมละ

อ้าว เวรกรรมแล้ว ทำไมมันไม่เห็นมีอะไรเปลี่ยนแปลงเลยละ ที่มันไม่เปลี่ยนแปลงก็เพราะว่า ตัว z-index นั้นจะทำงานกับ position:relative หรือ position:absolute พอเรารู้แบบนี้ เราลองใส่ position:relative ให้ tag <p> นะครับ

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;z-index:2;}
p {z-index:5;position:relative;}
[/css]

ผลลัพธ์ก็ออกมาเป็นแบบนี้

เย้ z-index ใช้งานได้แล้ว

คราวนี้ผมมี badge facebook จะเอามาใช้ประกอบบ้าง

Badge Facebook

เอามาใส่ใน Code เลย

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum rutrum metus, sed consequat lectus pharetra at. Morbi pulvinar egestas elementum. In viverra tristique vulputate. Pellentesque quis sapien tortor, ut consequat leo. Donec ac felis leo, quis vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Morbi mattis ultricies nibh eu semper. Suspendisse malesuada hendrerit sapien eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas commodo eleifend metus, eu sollicitudin mi gravida vel. Maecenas sodales vestibulum felis vel sodales. Praesent sed felis sem. Fusce tincidunt, odio vulputate commodo dapibus, justo tortor scelerisque eros, in aliquet mi erat at nibh. Pellentesque sed eros ligula, vel egestas lorem.</p>
<div id="ribbon"></div>
<img src="facebook.png" />
<img src="facebook.png" />
</div>
[/html]

ก็จะได้ผลลัพธ์ออกมาเป็นดังนี้

เพิ่มรูป badge facebook เข้าไปสองอัน

ต่อมา ถ้าเราอยากให้ badge มันซ้อนกันละ ก็ทำแบบนี้ครับ

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum rutrum metus, sed consequat lectus pharetra at. Morbi pulvinar egestas elementum. In viverra tristique vulputate. Pellentesque quis sapien tortor, ut consequat leo. Donec ac felis leo, quis vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Morbi mattis ultricies nibh eu semper. Suspendisse malesuada hendrerit sapien eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas commodo eleifend metus, eu sollicitudin mi gravida vel. Maecenas sodales vestibulum felis vel sodales. Praesent sed felis sem. Fusce tincidunt, odio vulputate commodo dapibus, justo tortor scelerisque eros, in aliquet mi erat at nibh. Pellentesque sed eros ligula, vel egestas lorem.</p>
<div id="ribbon"></div>
<img src="facebook.png" />
<img src="facebook.png" style="position:relative;left:-50px;" />
</div>
[/html]

ซึ่งจากที่สังเกตมา ถ้าใส่ position เข้าแล้ว z-index ของตัวนั้น จะมีมากกว่าตัวที่ไม่ได้ใส่ position ดังนั้นผลลัพธ์จึงออกมาเป็น badge facebook ตัวหลังทับตัวหน้า

badge facebook ตัวหลังทับตัวหน้า

แต่ถ้าอยากให้ตัวหน้าทับตัวหลัง ก็ง่าย ๆ แบบตัวอย่างที่แล้ว ใส่ position:relative กับ z-index

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum rutrum metus, sed consequat lectus pharetra at. Morbi pulvinar egestas elementum. In viverra tristique vulputate. Pellentesque quis sapien tortor, ut consequat leo. Donec ac felis leo, quis vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Morbi mattis ultricies nibh eu semper. Suspendisse malesuada hendrerit sapien eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas commodo eleifend metus, eu sollicitudin mi gravida vel. Maecenas sodales vestibulum felis vel sodales. Praesent sed felis sem. Fusce tincidunt, odio vulputate commodo dapibus, justo tortor scelerisque eros, in aliquet mi erat at nibh. Pellentesque sed eros ligula, vel egestas lorem.</p>
<div id="ribbon"></div>
<img src="facebook.png" style="position:relative;z-index:10;" />
<img src="facebook.png" style="position:relative;left:-50px;" />
</div>
[/html]

เราก็จะได้ผลลัพธ์ออกมาตามที่เราต้องการ

ตัวหน้าทับตัวหลังแล้ว

z-index ใช้ได้ผลกับ element ที่อยู่ระดับเดียวกัน

ถ้าอยู่ดี ๆ เราอยากจะบังริบบิ้นขึ้นมาละ งั้นลองสั่งให้ wrapper มันมี z-index มากกว่า ribbon แล้วกัน

[html]
<div id="wrapper">
<h1>Example : z-index</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum rutrum metus, sed consequat lectus pharetra at. Morbi pulvinar egestas elementum. In viverra tristique vulputate. Pellentesque quis sapien tortor, ut consequat leo. Donec ac felis leo, quis vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Morbi mattis ultricies nibh eu semper. Suspendisse malesuada hendrerit sapien eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas commodo eleifend metus, eu sollicitudin mi gravida vel. Maecenas sodales vestibulum felis vel sodales. Praesent sed felis sem. Fusce tincidunt, odio vulputate commodo dapibus, justo tortor scelerisque eros, in aliquet mi erat at nibh. Pellentesque sed eros ligula, vel egestas lorem.</p>
<div id="ribbon"></div>
</div>
[/html]

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;background:#DDD;
z-index:10;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;z-index:2;}
[/css]

แต่ทำไมสีเทามันไม่บังริบบิ้นละ ก็เพราะว่า wrapper มันคลุม ribbon อยู่

สีเทาไม่ได้ทับริบบิ้นแบบที่เราต้องการ

ดังนั้นเราลองสร้างอะไรมาให้มันอยู่ระดับเดียวกับ ribbon แล้วกัน

[html]
<div id="wrapper">
<div id="box">
<h1>Example : z-index</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum rutrum metus, sed consequat lectus pharetra at. Morbi pulvinar egestas elementum. In viverra tristique vulputate. Pellentesque quis sapien tortor, ut consequat leo. Donec ac felis leo, quis vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Morbi mattis ultricies nibh eu semper. Suspendisse malesuada hendrerit sapien eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas commodo eleifend metus, eu sollicitudin mi gravida vel. Maecenas sodales vestibulum felis vel sodales. Praesent sed felis sem. Fusce tincidunt, odio vulputate commodo dapibus, justo tortor scelerisque eros, in aliquet mi erat at nibh. Pellentesque sed eros ligula, vel egestas lorem.</p>
</div>
<div id="ribbon"></div>
</div>
[/html]

[css]
* {margin:0;padding:0;}
#wrapper {width:500px;margin:20px auto;padding:30px;border:3px solid #F66;position:relative;}
#box {position:relative;background:#DDD;z-index:10;}
#ribbon {width:155px;height:142px;background:url(ribbon.png);position:absolute;top:0px;right:0px;z-index:2;}
[/css]

ผลลัพธ์ที่ได้ จะได้กล่องสีเทาบังริบบิ้นแบบที่เราต้องการ

กล่องสีเทาบังริบบิ้นแล้ว

จากทั้งหมดที่ยกตัวอย่าง เราน่าจะสามารถนำไปประยุกต์ใช้งานต่าง ๆ ได้

October 8, 2011