การทับซ้อนองค์ประกอบด้วย CSS z-index

คุณสมบัติ z-index

ใช้ z-index ควบคุมลำดับการซ้อนขององค์ประกอบที่มี position ไม่ใช่ static ค่าต่ำกว่าจะอยู่ด้านหลัง

ตัวอย่าง: วางภาพด้านหลังข้อความ

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
    }
  </style>
</head>
<body>
  <img src="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" width="300" height="250">
  <p>This is demo text.</p>
</body>
</html>