Z-index luôn đi kèm với thuộc tính position. Trong ví dụ minh họa ở trên, tôi nắm tới nói về các trang sách, nó không hoàn toàn đúng mới hẳn, vì ở sách, trang nào nắm tới số lớn thì nằm dưới, nhưng với z-index elementor, thẻ HTML nào có trị số lớn thì nằm lên trên – tức là gần mắt hơn. Trị số của z-index phải là số nguyên, dương hoặc âm. Nếu chúng ta không quy tắc luôn giá trị chi tiết của z-index thì nó mặc định là 0, và trong hosting trang HTML khi đó, theo thứ tự từ trên xuống dưới của các dòng code, các thẻ ở dưới sẽ xếp phía trên Thiết kế website chẳng lắm trọn gói. Ví dụ:

<div style="height: 280px; margin: 20px; position: relative;"><div style="background-color: blue; height: 200px; left: 0px; position: absolute; top: 0px; width: 200px;"></div><div style="background-color: black; height: 200px; left: 40px; position: absolute; top: 40px; width: 200px;"></div><div style="background-color: red; height: 200px; left: 80px; position: absolute; top: 80px; width: 200px;"></div></div>

Bước 1:

<div class="colors">    <div class="red">        <span>Red</span>    </div>    <div class="green">        <span>Green</span>    </div>    <div class="blue">        <span>Blue</span>    </div></div>

Bước 2:

.colors     margin - left: 40 px;    margin - top: 40 px;  được  đột nhiên .red, .green, .blue     width: 100 px;    height: 100 px;    color: white;    line - height: 100 px;    text - align: center; nhanh .red     background: red;  có thể  sớm nhanh .green     margin - top: -40 px;    margin - left: 60 px;    background: green;  cả .blue     margin - top: -40 px;    margin - left: 120 px;    background: blue;  dài 

Và đây là thành quả đang đạt được dịch vụ seo sau khi Chương trình cấu trúc trên:

Z index wordpress - Sử dụng thuộc tích css z index hiệu quả