CSS z-index การกำหนดเลเยอร์

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
โพสต์: 212
ลงทะเบียนเมื่อ: 12/01/2015 10:14 am

CSS z-index การกำหนดเลเยอร์

โพสต์ที่ยังไม่ได้อ่าน โดย GoB »

CSS z-index การกำหนดเลเยอร์

z-index เป็นการกำหนดเลเยอร์ ซึ่งจะอธิบายได้ว่า ถ้า z-index อันไหนมีค่ามากกว่าก็จะอยู่ด้านบนนั้นเอง จากตัวอย่างเราสามารถนำไปประยุกต์ใช้กับรูปภาพเพื่อใช้ลำดับความสำคัญได้ ช่วยแก้ปัญหาสำหรับเลเยอร์ที่ซ้อนกัน ซึ่งต้องใช้ควบคู่กับ CSS : position ด้วย โดยค่า z-index ปกติแล้วถ้าเราไม่กำหนด z-index (z-index จะเท่ากับ 0 )

ตัวอย่างโค้ดที่เขียน

โค้ด: เลือกทั้งหมด

<html>
<head>
<style>
img {
    position: absolute;   //สามารถกำหนดตำแหน่งได้อย่างอิสระ
    left: 20px;	//กำหนดระยะห่างด้านซ้าย
    top: 20px;	//กำหนดระยะห่างด้านบน
    z-index: -2;	//เป็นการกำหนดเลเยอร์  (เช่น ถ้าอันไหนมีค่ามากกว่าก็จะอยู่ด้านบน)
}
</style>
</head>
<body>
<h1>ประโยชน์ของแอปเปิ้ล</h1>
<img src="apple.jpg" width="150" height="150">
</body>
</html>
ผลลัพธ์ที่ได้
1.jpg
1.jpg (18.75 KiB) Viewed 2808 times
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 63