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

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

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

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

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

Postby GoB » 12/03/2015 5:18 pm

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

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

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

Code: Select all

<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 673 times

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests