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 triệt để chính xác 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 định giá trị cụ thể của z-index thì nó mặc định là 0, và trong hosting trang HTML khi đó, theo vật dụng 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ế web 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;

.red, .green, .blue 
    width: 100 px;
    height: 100 px;
    color: white;
    line - height: 100 px;
    text - align: center;

.red 
    background: red;

.green 
    margin - top: -40 px;
    margin - left: 60 px;
    background: green;

.blue 
    margin - top: -40 px;
    margin - left: 120 px;
    background: blue;

Và đây là kết quả đạ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ả