CSS ฉันต้องการให้ div อยู่เหนือทุกสิ่ง

ฉันจะสร้างแท็ก div html ให้อยู่เหนือทุกสิ่งได้อย่างไร

เพื่อให้ z-index ทำงานได้คุณจะต้องให้องค์ประกอบ a position:absoluteหรือposition:relativeคุณสมบัติ เมื่อคุณทำเช่นนั้นลิงก์ของคุณจะทำงานได้อย่างถูกต้องแม้ว่าคุณอาจต้องปรับแต่ง CSS ของคุณในภายหลัง

เพื่อz-index:1000ให้ได้ผลคุณต้องมีรูปแบบการวางตำแหน่งแบบไม่คงที่

เพิ่มposition:relative;ในกฎโดยเลือกองค์ประกอบที่คุณต้องการให้อยู่ด้านบน

ใช่เพื่อให้ดัชนี z ทำงานคุณจะต้องให้ตำแหน่งองค์ประกอบ: สัมบูรณ์หรือตำแหน่ง: คุณสมบัติสัมพัทธ์

แต่ ... ใส่ใจพ่อแม่!

คุณต้องขึ้นโหนดขององค์ประกอบเพื่อตรวจสอบว่าในระดับของพาเรนต์ทั่วไปลูกหลานแรกมีดัชนี z ที่กำหนดไว้หรือไม่

ลูกหลานอื่น ๆ ทั้งหมดไม่สามารถอยู่เบื้องหน้าได้หากที่ฐานมีดัชนี z ที่แน่นอนต่ำกว่า

ในตัวอย่างตัวอย่างนี้ div1-2-1 มีดัชนี z เท่ากับ 1,000 แต่อย่างไรก็ตามภายใต้ div1-1-1 ซึ่งมีดัชนี z เท่ากับ 3

เนื่องจาก div1-1 มีดัชนี z มากกว่า div1-2

.div {
  
}

#div1 {
  z-index: 1;
  position: absolute;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

#div1-1 {
  z-index: 2;
  position: absolute;
  left: 230px;
  width: 200px;
  height: 200px;
  top: 31px;
  background-color: indianred;
}

#div1-1-1 {
  z-index: 3;
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}

#div1-2 {
  z-index: 1;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 80px;
  top: 5px;
  background-color: red;
}

#div1-2-1 {
  z-index: 1000;
  position: absolute;
  left: 70px;
  width: 120px;
  height: 100px;
  top: 10px;
  color: red;
  background-color: lightyellow;
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.rotate {
  writing-mode: vertical-rl;
  padding-left: 50px;
  font-weight: bold;
  font-size: 20px;
}

<div class="div" id="div1">div1</br>z-index: 1
  <div class="div" id="div1-1">div1-1</br>z-index: 2
    <div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
  </div>
  
  <div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
    <div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br>   parent)</span></div>
  </div>
</div>

คุณต้องเพิ่มลงposition:relative;ในเมนู ดัชนี Z ใช้งานได้เฉพาะเมื่อคุณมีโครงร่างการกำหนดตำแหน่งที่ไม่คงที่

z-indexคุณสมบัติช่วยให้คุณสามารถควบคุมได้ที่ด้านหน้า จำนวนที่มากขึ้นคุณตั้งค่าองค์ประกอบที่คุณได้รับ

positionคุณสมบัติควรเป็นrelativeเพราะตำแหน่งhtml-elementควรอยู่ในตำแหน่งที่ค่อนข้างเทียบกับตัวควบคุมอื่น ๆ ในทุกมิติ

element.style {
   position:relative;
   z-index:1000; //change your number as per elements lies on your page.
}

ฉันจะสมมติว่าคุณทำป๊อปอัปพร้อมรหัสจากโรงเรียน WW3 ถูกต้องหรือไม่? ตรวจสอบมัน css .modal หนึ่งมีอยู่แล้วคำz-indexมี เพียงแค่เปลี่ยนจาก 1 เป็น 100

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}