CSS z-indexคุณสมบัติ
ตัวอย่าง
ตั้งค่าดัชนี z สำหรับรูปภาพ:
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
ความหมายและการใช้งาน
คุณสมบัติz-index
ระบุลำดับสแต็กขององค์ประกอบ
องค์ประกอบที่มีลำดับสแต็กมากกว่ามักจะอยู่ด้านหน้าองค์ประกอบที่มีลำดับสแต็กที่ต่ำกว่าเสมอ
หมายเหตุ: z-index
ใช้ได้เฉพาะกับองค์ประกอบที่มีตำแหน่ง (ตำแหน่ง: สัมบูรณ์, ตำแหน่ง: สัมพันธ์, ตำแหน่ง: คงที่ หรือตำแหน่ง: เหนียว) และรายการแบบยืดหยุ่น (องค์ประกอบที่เป็นลูกโดยตรงของ
องค์ประกอบ display:flex )
หมายเหตุ:หากองค์ประกอบสองตำแหน่งซ้อนทับกันโดยไม่มีการz-index
ระบุ องค์ประกอบที่วางตำแหน่งสุดท้ายในโค้ด HTML จะแสดงที่ด้านบน
ค่าเริ่มต้น: | รถยนต์ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.zIndex="-1" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
ไวยากรณ์ CSS
z-index: auto|number|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
auto | Sets the stack order equal to its parents. This is default | |
number | Sets the stack order of the element. Negative numbers are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: การจัดตำแหน่ง CSS
การอ้างอิง HTML DOM:
zIndex คุณสมบัติ