search

Việc sử dụng chỉ mục z trong CSS là gì

1 năms trước
Trả lời: 0
Lượt xem: 40 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 là một thuộc tính được sử dụng để kiểm soát thứ tự của các lớp trong tài liệu. Các phần tử có giá trị 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 cao hơn xuất hiện phía trên các phần tử có giá trị thấp hơn. Giống như cách trục x và y trên trang xác định vị trí đặt phần tử theo chiều ngang và chiều dọc, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 kiểm soát cách chúng xếp chồng lên nhau trên trục z

Show

Việc sử dụng chỉ mục z trong CSS là gì

Xếp chồng mặc định

Khi viết HTML của chúng tôi, các phần tử xuất hiện thấp hơn trong tài liệu, tự nhiên xếp các phần tử phía trên lên cao hơn

<body>
<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>
</body>

Với đoạn mã HTML này, 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
1 sẽ xếp chồng lên trên khu vực nội dung chính sẽ xếp chồng lên trên 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 nếu tất cả chúng được định vị chồng lên nhau

Các phần tử có thể được chồng lên nhau bằng cách sử dụng kết hợp các thuộc tính 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
3 và thuộc tính offset 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
4, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
5, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
6 và 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
7

Nếu tôi đặt 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
8 trên mỗi phần tử này, tất cả chúng sẽ xếp chồng lên nhau. 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
1 xuất hiện cuối cùng trong tài liệu, do đó, theo mặc định, xếp chồng lên trên hai phần tử trước đó

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

Nếu tôi sử dụng các thuộc tính offset, 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
4 và 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
7, chúng ta có thể thấy thứ tự rõ ràng hơn

Bối cảnh xếp chồng

Trong khi sử dụng 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
8 để tạo các phần tử chồng lên nhau, chúng tôi vẫn chưa tạo ra thứ được gọi là bối cảnh xếp chồng

Bối cảnh xếp chồng được tạo theo bất kỳ cách nào sau đây

  • một phần tử có vị trí 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    43 hoặc 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    44 và giá trị 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    2 không phải là 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    46
  • một mục flexbox có giá trị 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    2 không phải là 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    46
  • một phần tử có 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    49 nhỏ hơn 1
  • một phần tử có 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    90 được đặt thành bất kỳ thứ gì khác ngoài 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    91

Cho đến nay, cách phổ biến nhất để tạo và sử dụng bối cảnh xếp chồng là ví dụ đầu tiên trong danh sách này, vì vậy hãy tập trung vào đó trong một phút

Quay trở lại ví dụ trước, chúng ta có ba phần tử được đặt chồng lên nhau nhưng hiện tại, chúng không có giá trị 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2

Thuộc tính 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 cho phép chúng ta kiểm soát thứ tự sắp xếp

Nếu tôi đặt 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
94 trên 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
1, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
96 trên 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
97 và 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
98 trên 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2, thứ tự của ngăn xếp mặc định có thể bị đảo ngược hoàn toàn

Điều này trông khá đơn giản trên bề mặt; . Thật không may, nó phức tạp hơn thế một chút

.site-header, .site-content, .site-footer { position: absolute; width: 400px; padding: 20px; } .site-header {top: 0; left: 0;} .site-content {top: 50px; left: 50px;} .site-footer {top: 100px; left: 100px;}2 trong bối cảnh xếp chồng

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
4

Nếu tôi thêm một hộp bên trong hộp chứa 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
74 và đặt nó ngay bên ngoài góc dưới cùng bên phải, chúng ta có thể thấy rằng hộp đó ở trên hộp màu xanh lá cây và bên dưới hộp màu hồng

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
9

Dựa trên kiến ​​thức của chúng ta về 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2, chúng ta có thể nghĩ rằng để hộp màu vàng này xuất hiện phía trên hộp màu hồng, chúng ta chỉ cần đặt giá trị cao hơn cho 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2

Nếu tôi đặt 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
77, cao hơn 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
98, chúng tôi không thấy thay đổi. Mọi người thường cố gắng ép xếp chồng bằng cách thử một số thực sự lớn như 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
79 nhưng làm điều này cũng không có tác dụng gì. Việc nhìn thấy các giá trị 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 như thế này rải rác khắp cơ sở mã là một chút mùi mã, vì vậy hãy thử và tránh nó nếu bạn có thể

Lý do chúng tôi không thể nhận được kết quả mong muốn của hộp màu vàng trên hộp màu hồng là do cách hoạt động của 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 trong bối cảnh xếp chồng

Để chứng minh điều này, hãy xem một ví dụ liên quan hơn một chút mà tôi đã mượn từ trang web MDN

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
7______36

Ở đây chúng ta có một hộp chứa 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
1 và 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
97 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
65 như trước nhưng bên trong hộp chứa 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
74, chúng tôi có ba hộp tất cả đã được định vị và đưa ra một 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2

Trước tiên, hãy xem xét ba vùng chứa chính – 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
1 và 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
97

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 có 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 trên 5 nên xuất hiện xếp chồng lên trên 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
97 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
65 có 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
85. 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
1 có 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 trên 2 nên xuất hiện bên dưới 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
97 với 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 trên 4 cao hơn. Tất cả tốt cho đến nay?

Mọi thứ trở nên hơi khó hiểu với ba hộp bên trong hộp chứa 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
97

Hộp nội dung 1 có 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 trên 6 nhưng dường như nằm dưới 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 với 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 trên 5 thấp hơn

Hộp nội dung 2 có 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 trên 1 nhưng xuất hiện phía trên 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
1 có 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 trên 2 cao hơn

Vì vậy những gì đang xảy ra?

Tất cả điều này có thể được giải thích bởi thực tế là tất cả các giá trị 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 được giải quyết trong ngữ cảnh xếp chồng gốc của chúng. Bởi vì vùng chứa chính 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
48 có 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 cao hơn so với 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
1, nên mọi phần tử được định vị trong 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
48 đều được đánh giá trong ngữ cảnh đó

Một cách hay để suy nghĩ về thứ tự xếp chồng trong bối cảnh xếp chồng là xem nó giống như một mục con trong danh sách có thứ tự lồng nhau

Điều này có thể được viết như sau

  • tiêu đề. 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    22
  • Chủ yếu. 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    77
    • Hộp 1. 
      .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
      24
    • hộp 2. 
      .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
      25
    • Hộp 3. 
      .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
      26
  • chân trang. 
    .site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
    96

Vì vậy, mặc dù, 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 là 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
22 và 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
65 hộp 1 là 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
21, thứ tự hiển thị của nó là 4. 6 vẫn nhỏ hơn 5. Như vậy, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
65 hộp 1 xuất hiện bên dưới 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2

Lúc đầu hơi khó hiểu, nhưng với thực tế, nó bắt đầu có ý nghĩa

.site-header, .site-content, .site-footer { position: absolute; width: 400px; padding: 20px; } .site-header {top: 0; left: 0;} .site-content {top: 50px; left: 50px;} .site-footer {top: 100px; left: 100px;}2 chỉ hoạt động đối với các phần tử được định vị

Nếu bạn muốn kiểm soát thứ tự sắp xếp của các phần tử, bạn có thể làm như vậy với 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2. Nhưng 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 sẽ chỉ có hiệu lực nếu phần tử cũng có giá trị 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
3 là 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
43, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
44 hoặc 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
00

Đặt các phần tử chính xác với vị trí là điều tuyệt vời để xây dựng bố cục phức tạp hoặc các mẫu giao diện người dùng thú vị nhưng thông thường bạn muốn kiểm soát thứ tự xếp chồng mà không di chuyển phần tử từ vị trí ban đầu của nó trên trang

Trong trường hợp này, bạn chỉ có thể đặt 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
01 nhưng không cung cấp bất kỳ giá trị nào cho 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
4, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
5, 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
6 hoặc 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
7. Phần tử sẽ vẫn ở vị trí ban đầu trên trang, luồng tài liệu sẽ không bị gián đoạn và các giá trị 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 sẽ có hiệu lực

Bạn có thể có .site-header, .site-content, .site-footer { position: absolute; width: 400px; padding: 20px; } .site-header {top: 0; left: 0;} .site-content {top: 50px; left: 50px;} .site-footer {top: 100px; left: 100px;}2 tiêu cực

Các phần tử phân lớp thường được thực hiện để xây dựng các hình dạng phức tạp hoặc các thành phần giao diện người dùng. Điều này thường có nghĩa là xếp các phần tử thành lớp chồng lên nhau, với các giá trị ngày càng tăng của 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2. Để đặt một phần tử trên một lớp bên dưới một lớp khác, nó chỉ cần có giá trị thấp hơn là 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 nhưng giá trị thấp hơn đó có thể là số âm

Một lĩnh vực mà điều này hữu ích là khi sử dụng các phần tử giả và muốn định vị chúng phía sau nội dung của phần tử cha của chúng

Do cách hoạt động của ngữ cảnh xếp chồng, giá trị âm của 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 là cần thiết đối với bất kỳ phần tử 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
11 hoặc 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
12 nào nếu chúng được định vị phía sau nội dung văn bản của phần tử gốc của chúng

Hãy xem Codepen sau đây và thử nghiệm với các giá trị khác nhau của 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2

Xem Bút GNgvxO của SitePoint (@SitePoint) trên CodePen

chiến lược .site-header, .site-content, .site-footer { position: absolute; width: 400px; padding: 20px; } .site-header {top: 0; left: 0;} .site-content {top: 50px; left: 50px;} .site-footer {top: 100px; left: 100px;}2

Hãy kết thúc với một chiến lược đơn giản mà tôi sử dụng để áp dụng 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 trong suốt một dự án

Trước đó, chúng tôi đã sử dụng số gia một chữ số cho các giá trị 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 nhưng nếu bạn muốn thêm một phần tử mới vào giữa hai phần tử được đặt bằng 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
98 và 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
77 thì sao?

Sử dụng các bước 100 để thiết lập .site-header, .site-content, .site-footer { position: absolute; width: 400px; padding: 20px; } .site-header {top: 0; left: 0;} .site-content {top: 50px; left: 50px;} .site-footer {top: 100px; left: 100px;}2

Khi xử lý 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2, không có gì lạ khi thấy mã như thế này

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
8

Điều này đối với tôi có vẻ khó hiểu (và chỉ trở nên tồi tệ hơn khi được thêm vào với 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
21). Việc nhìn thấy các giá trị như thế này thường là dấu hiệu của việc nhà phát triển không hiểu ngữ cảnh xếp chồng và cố gắng buộc lớp này nằm trên lớp khác

Thay vì sử dụng các số tùy ý như 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
79 hoặc 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
23 hoặc 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
24, chúng tôi có thể hệ thống hóa thang đo 
.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 của mình và mang lại trật tự hơn một chút cho quá trình tố tụng. Đây không phải (chỉ) vì tôi mắc chứng OCD dành cho nhà phát triển. Thật thà

Thay vì sử dụng số gia một chữ số cho 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2 của tôi, tôi sử dụng số gia 100

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
4

Tôi làm điều này để giữ cho mọi thứ ngăn nắp, nhưng cũng để lưu ý đến nhiều lớp khác nhau được sử dụng trong suốt một dự án. Một lợi ích khác là nếu một lớp mới cần được thêm vào giữa hai lớp khác, thì có 99 giá trị tiềm năng để chọn ở giữa

Khi xây dựng hệ thống 

.site-header, .site-content, .site-footer {
position: absolute;
width: 400px;
padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}
2, cách tiếp cận thủ công này khá chắc chắn nhưng có thể trở nên linh hoạt hơn khi kết hợp với sức mạnh của bộ xử lý trước như Sass

 

Chia sẻ bài viết này

Việc sử dụng chỉ mục z trong CSS là gì

Chàng Routledge

Nhà phát triển front-end và giáo viên tại The General Assembly London. A to Z CSS Screencaster, Người sáng lập cây non. kỹ thuật số và đồng sáng lập The Food Rush

Tại sao Z

Khi các phần tử được định vị, chúng có thể chồng lên các phần tử khác . Thuộc tính chỉ mục z chỉ định thứ tự ngăn xếp của một phần tử (phần tử nào sẽ được đặt ở phía trước hoặc phía sau các phần tử khác).

Z là gì

z-index xác định phần tử được định vị nào xuất hiện trên cùng (Giống như các lớp). Vì vậy, chỉ số z. 1000 sẽ xuất hiện trên chỉ số z 999 . Làm chỉ mục z. 1001 là nỗ lực xuất hiện "trên cùng" của một mục có chỉ số z. 1000.

Z có nghĩa là gì

z-index. 0 luôn là " lớp mặc định " (lớp chứa tất cả các phần tử không có chỉ mục z rõ ràng) và chỉ mục z. phương tiện tự động. "Đặt thứ tự ngăn xếp bằng với cha của nó".

Mục đích của việc đặt hàng Z là gì?

Sắp xếp theo thứ tự Z nhằm mục đích tạo ra các tệp dữ liệu cân bằng đồng đều về số lượng bộ dữ liệu, nhưng không nhất thiết là kích thước dữ liệu trên đĩa . Hai biện pháp này thường tương quan với nhau nhất, nhưng có thể có những trường hợp không đúng như vậy, dẫn đến sai lệch trong thời gian tối ưu hóa nhiệm vụ.

programming css

Bài Viết Liên Quan

Bộ lọc chuỗi Python
Bộ lọc chuỗi Python

How much is a Audi R8 2023?
How much is a Audi R8 2023?

Một float có bao nhiêu chữ số?
Một float có bao nhiêu chữ số?

Tôi có thể mở pdf bằng html không?
Tôi có thể mở pdf bằng html không?

Acura RDX Loại S 2023
Acura RDX Loại S 2023

Tại sao mongodb là cơ sở dữ liệu nosql?
Tại sao mongodb là cơ sở dữ liệu nosql?

Excel không thể di chuyển Ngắt trang vì làm như vậy sẽ giảm
Excel không thể di chuyển Ngắt trang vì làm như vậy sẽ giảm

Rau muống xào chao có bao nhiêu calo?
Rau muống xào chao có bao nhiêu calo?

Làm cách nào để tạo dự án Laravel phiên bản 7?
Làm cách nào để tạo dự án Laravel phiên bản 7?

Phân tích thời gian Python
Phân tích thời gian Python

MỚI CẬP NHẬP

Ca khúc mẹ yêu là của nhạc sĩ nào năm 2024
16 phúts trước . bởi Short-livedTransmission
Uống omega 3 6 9 vào lúc nào năm 2024
46 phúts trước . bởi HomogeneousLiner
Irene đã từng đóng mv nào cho nhóm nhạc khác năm 2024
1 giờs trước . bởi MockBoldness
Bài tập tính từ sở hữu lớp 2 năm 2024
1 giờs trước . bởi DistinguishingHardship
Dạ dày lợn hấp tiêu tốt cho tiêu hóa năm 2024
2 giờs trước . bởi PurportedSchooner
Khái quát văn học dân gian việt nam lớp 11 năm 2024
2 giờs trước . bởi ResourcefulVicinity
Xin lỗi ché muốn 2 chồng 32nd december love error năm 2024
2 giờs trước . bởi IneffectiveFixing
Dđề kiểm tra toán hình họ 11 vuông góc.violet năm 2024
3 giờs trước . bởi ManiacalGenesis
Tìm hiểu về anh hùng nguyễn văn trỗi năm 2024
3 giờs trước . bởi CompatibleLifeline
Thay đổi tên công ty có phải hủy hóa đơn năm 2024
3 giờs trước . bởi InconspicuousSquad

Xem Nhiều

File kẹp tài liệu đục lỗ tiếng anh là gì năm 2024
2 ngàys trước . bởi InsidiousReceptor
Lỗi khi mở folder màn hình view bị thu nhỏ năm 2024
4 ngàys trước . bởi RegimentalAdoption
Viết bài văn nghị luận về bảo vệ môi trường năm 2024
1 ngàys trước . bởi RaspingPatchwork
Công văn sở giáo dục đào tạo tỉnh quảng ngãi năm 2024
1 ngàys trước . bởi DapperFoothold
Uống vitamin d vào lúc nào tốt nhất năm 2024
3 ngàys trước . bởi PrimordialHacker
Rách giời rơi xuống nghĩa là gì năm 2024
5 ngàys trước . bởi VastOrientation
Bài 35 sách giáo khoa toán 8 tập 1 năm 2024
15 giờs trước . bởi TenuousScenery
Lỗi không gõ được tiếng việt trên amis năm 2024
1 ngàys trước . bởi PonderousCivility
Những bài toán lớp 1 giúp trẻ tư duy năm 2024
2 ngàys trước . bởi AnnoyedWomanhood
Uống omega 3 6 9 vào lúc nào năm 2024
46 phúts trước . bởi HomogeneousLiner

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.