Câu trả lời:
Để z-index hoạt động, bạn cần cung cấp cho phần tử a position:absolute
hoặc một thuộc position:relative
tính. Khi bạn làm điều đó, các liên kết của bạn sẽ hoạt động bình thường, mặc dù bạn có thể phải chỉnh sửa CSS một chút sau đó.
Để z-index:1000
có hiệu ứng, bạn cần một sơ đồ định vị không tĩnh.
Thêm position:relative;
vào quy tắc chọn phần tử bạn muốn ở trên cùng
Có, để z-index hoạt động, bạn sẽ cần cung cấp cho phần tử một thuộc tính position: tuyệt đối hoặc vị trí: tương đối.
Bạn phải đi lên các nút của các phần tử để kiểm tra xem ở cấp độ cha mẹ chung, các phần tử con đầu tiên có chỉ số z xác định hay không.
Tất cả các con cháu khác không bao giờ có thể ở phía trước nếu ở gốc có chỉ số z xác định thấp hơn.
Trong ví dụ về đoạn mã này, div1-2-1 có chỉ số z là 1000 nhưng nằm dưới div1-1-1 có chỉ số z là 3.
Điều này là do div1-1 có chỉ số z lớn hơn 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>
Bạn cần thêm position:relative;
vào menu. Chỉ mục Z chỉ hoạt động khi bạn có một sơ đồ định vị không tĩnh.
z-index
tài sản cho phép bạn kiểm soát của bạn ở phía trước. số lớn hơn bạn đặt cao hơn phần tử của bạn mà bạn nhận được.
position
thuộc tính nên là relative
bởi vì vị trí của html-element
phải là vị trí tương đối so với các điều khiển khác trong mọi thứ nguyên.
element.style {
position:relative;
z-index:1000; //change your number as per elements lies on your page.
}
Tôi sẽ cho rằng bạn tạo một cửa sổ bật lên với mã từ trường WW3, đúng không? kiểm tra nó css. .modal một, đã có từ z-index
ở đó. chỉ cần thay đổi từ 1 đến 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 */
}