จากการอ่านบทความนี้ คุณจะสามารถสร้าง div ที่ทับซ้อนกันด้วย CSS ได้ เพื่อจุดประสงค์นี้ อันดับแรก เราจะเรียนรู้เกี่ยวกับ “ ตำแหน่ง ' และ ' z-index ' คุณสมบัติ.
มาเริ่มกันเลย!
CSS “ตำแหน่ง” คุณสมบัติ
ใน HTML คุณสามารถกำหนดตำแหน่งขององค์ประกอบโดยใช้ ' ตำแหน่ง ' คุณสมบัติ. ตำแหน่งสุดท้ายขององค์ประกอบบนหน้าเว็บนั้นพิจารณาจากด้านขวา ซ้าย บน ล่าง และร่วมกับคุณสมบัติของดัชนี z
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติตำแหน่งคือ:
ตำแหน่ง : ค่า
ในสถานที่ของ “ ค่า ” คุณสามารถกำหนดตำแหน่งขององค์ประกอบต่างๆ เช่น สัมบูรณ์ สัมพัทธ์ คงที่ และเหนียว
CSS “z-index” คุณสมบัติ
“ z-index คุณสมบัติ ” ใช้เพื่อกำหนดลำดับสแต็กขององค์ประกอบ องค์ประกอบที่มีค่าดัชนี z มากกว่าจะถูกวางไว้ข้างหน้าองค์ประกอบอื่น
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติดัชนี z มีดังนี้:
z-index : รถยนต์ |หมายเลขในไวยากรณ์ที่ระบุข้างต้น “ รถยนต์ ” ใช้เพื่อกำหนดลำดับตามองค์ประกอบหลัก ในขณะที่สำหรับลำดับด้วยตนเอง “ ตัวเลข ” ถูกกำหนดเป็นค่าของคุณสมบัติดัชนี z
ตอนนี้ ไปที่ตัวอย่างการใช้งานจริงของการสร้าง div ที่ทับซ้อนกันด้วย CSS
ตัวอย่างที่ 1: การทับซ้อนส่วนที่สองกับส่วนแรก
ในส่วน HTML เราจะสร้างสอง div และกำหนดชื่อคลาสที่แตกต่างกันเป็น “ div1 ' และ ' div2 ”
HTML
< ร่างกาย >< div ระดับ = 'ดิวิชั่น1' >< / div >
< div ระดับ = 'ดิวิชั่น2' >< / div >
< / ร่างกาย >
ตอนนี้ ย้ายไปที่ CSS และทำตามคำแนะนำที่กำหนด:
- ตั้งค่าคุณสมบัติตำแหน่งเป็น “ แน่นอน ” สำหรับสถานที่ div1 ตรงตำแหน่งที่คุณต้องการ
- ปรับความสูงและความกว้างของ div1 เป็น “ 250px ' และ ' 300px ”
- ค่าของดัชนี z ถูกกำหนดเป็น “ 1 ”
- ตั้งค่าสีพื้นหลังของ div1 เป็น “ rgb(4, 3, 75) ”
CSS
.div1 {ตำแหน่ง : แน่นอน ;
ความสูง : 250px ;
ความกว้าง : 300px ;
z-index : 1 ;
พื้นหลัง : rgb ( 4 , 3 , 75 ) ;
}
เอาท์พุต
วาง div แรกสำเร็จแล้ว ตอนนี้เราย้ายไปที่ div ที่สอง
หากต้องการทับซ้อน div2 ให้ทำตามคำแนะนำที่กำหนด:
- ตั้งค่าคุณสมบัติตำแหน่ง ความกว้าง และความสูงของ div2 เหมือนกับ “ div1 ”
- ตั้งค่าดัชนี z เป็น “ สอง ” เพื่อวางไว้หน้า div แรก
- ตั้งค่าสีพื้นหลังที่แตกต่างกันสำหรับ div2 เป็น “ rgb(0, 204, 255) ”
- กำหนดระยะขอบของ div2 เป็น “ 50px ” เป็นค่าระยะขอบบนและระยะขอบซ้าย
- ตั้งค่าความทึบของ div2 เป็น “ 0.7 ”
CSS
.div2 {ตำแหน่ง : แน่นอน ;
ความกว้าง : 300px ;
ความสูง : 250px ;
z-index : 3 ;
พื้นหลัง : rgb ( 0 , 204 , 255 ) ;
ระยะขอบ : 50px ;
ความทึบ : 0.7 ;
}
เอาท์พุต
Div2 ทับซ้อนกับ div1 ได้สำเร็จ
หากคุณต้องการตั้งค่า div1 ไว้บน div two คุณเพียงแค่ต้องเปลี่ยนค่าของดัชนี z มาดูตัวอย่างเรื่องนี้กัน
ตัวอย่างที่ 2: การทับซ้อน Div แรกกับวินาทีที่สอง
ในตัวอย่างนี้ เราจะเปลี่ยนค่าของดัชนี z ของทั้งสอง div ใน ' .div1 ” คลาสของไฟล์ CSS ตั้งค่าเป็น “ z-index ” คุณสมบัติเป็น “ สอง ”:
z-index : สอง ;หลังจากนั้นใน “ .div2 ” class ตั้งค่าของ “ z-index ” คุณสมบัติเป็น “ 1 ”:
z-index : 1 ;ด้วยเหตุนี้ div แรกจะถูกวางไว้ด้านหน้า div ที่สอง:
เราได้รวบรวมวิธีที่ง่ายที่สุดในการสร้างสอง div ที่ทับซ้อนกันด้วย CSS
บทสรุป
“ ตำแหน่ง ' และ ' z-index ” ใช้เพื่อสร้าง div ที่ทับซ้อนกันใน CSS โดยค่าเริ่มต้น ค่าของดัชนี z คือ 1 ซึ่งระบุว่า div ที่สร้างขึ้นใหม่จะถูกวางไว้ด้านหน้า div ที่มีอยู่ อย่างไรก็ตาม คุณสามารถระบุค่าใดก็ได้ตามความต้องการของคุณเพื่อปรับลำดับการทับซ้อนกัน ในบทความนี้ เราได้นำเสนอวิธีการสร้าง Divs ที่ทับซ้อนกันด้วย CSS