CSS : การใช้ DIV กับ z-index

z-index คืออะไร ง่ายๆ นะครับ คือการใช้จัดเรียง elementที่ซ้อนกันและต้องเป็น element ที่ถูกกำหนด position ไว้เท่านั้น
position ก็จะมี position:relative,position:absolute; เป็นต้น

เรามีดูตัวอย่างกันนะครับ


<style type='text/css'>
#box1,#box2,#box3{
background-color:#0099FF;
border:1px solid #000;
height:100px;
width:100px;
position:absolute;
z-index:3;
}
#box2{
background-color:#FF0099;
left:20px;
top:20px;
position:absolute;
z-index:1;
}
#box3{
background-color:#00FF99;
left:40px;
top:40px;
position:absolute;
z-index:4;
}
</style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>


อธิบายนะครับ

1.กำหนด <div> ทั้งหมด 3 ตัว คือ div ทีมี ชื่อ box1,box2,box3 ตามลำดับ
2.สร้าง CSS ให้กับ div ทั้ง 3 ตัว โดยให้ค่าทั้ง 3 div เหมือนกัน ดังนี้
   -background color เป็น รหัส สี #0099FF
   -ขอบ ของ div เป็น ความหนา 1 px เป็น เส้นตรง (solid) สี เป็นสีดำ
   -ความสูง และ ความกว้าง 100px
   -position เป็น แบบ absolute คือ อ้างอิงตำแหน่งของ parent
   -กำหนด z-index คือ เหมือนตำแหน่งของ Layout อ่ะ ยิ่งตัวเลขยิ่ง มากก็จะอยู่บนสุด
3.กำหนด ค่า CSS ของ box2 ให้เป็นดังนี้
   -background color รหัสสี #FF0099
   -กำหนดให้ห่างจากขอบซ้ายและขอบด้านบน 20px 
   -position เป็น แบบ absolute คือ อ้างอิงตำแหน่งของ parent
   -กำหนด z-index คือ เหมือนตำแหน่งของ Layout อ่ะ ยิ่งตัวเลขยิ่ง มากก็จะอยู่บนสุด
4.กำหนด ค่า CSS ของ box3 ให้เป็นดังนี้
   -background color รหัสสี #00FF99
   -กำหนดให้ห่างจากขอบซ้ายและขอบด้านบน 40px 
   -position เป็น แบบ absolute คือ อ้างอิงตำแหน่งของ parent
   -กำหนด z-index คือ เหมือนตำแหน่งของ Layout อ่ะ ยิ่งตัวเลขยิ่ง มากก็จะอยู่บนสุด