search

Vị trí: css tuyệt đối

Ngày đăng: 01/12/2022
Trả lời: 0
Lượt xem: 41

Bây giờ là lúc chuyển sự chú ý của bạn sang cặp giá trị tài sản thứ hai của 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
0—
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
1 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
2. Cặp giá trị đầu tiên—
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
3 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
4—có liên quan chặt chẽ với nhau và chúng tôi đã xem xét những giá trị đó rất chi tiết trong bài viết trước

Show

Các phần tử được định vị tuyệt đối được xóa hoàn toàn khỏi luồng tài liệu. Điều đó có nghĩa là chúng hoàn toàn không có tác dụng đối với phần tử gốc của chúng hoặc đối với các phần tử xuất hiện sau chúng trong mã nguồn. Do đó, một phần tử được định vị tuyệt đối sẽ chồng lên nội dung khác trừ khi bạn thực hiện hành động để ngăn chặn điều đó. Tất nhiên, đôi khi, sự trùng lặp này chính xác là những gì bạn mong muốn, nhưng bạn nên biết về nó để đảm bảo rằng bạn có được bố cục như ý muốn

Định vị cố định thực chất chỉ là một dạng chuyên biệt của định vị tuyệt đối;

Trong bài viết này của Giáo trình Tiêu chuẩn Web, tôi sẽ cung cấp cho bạn một số ví dụ thực tế về việc sử dụng cả định vị 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
1 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
2, xem xét một số yêu cầu hỗ trợ của trình duyệt và khám phá khái niệm về chỉ mục z

Tuy nhiên, trước khi tôi nói về tất cả những điều này, tôi sẽ đề cập đến một khái niệm tiên quyết cơ bản—chứa các khối

chứa các khối

Một khái niệm thiết yếu khi nói đến định vị tuyệt đối là khối chứa. hộp khối mà vị trí và kích thước của hộp được định vị tuyệt đối có liên quan đến. Đối với các hộp tĩnh và các hộp được định vị tương đối, khối chứa là tổ tiên cấp khối gần nhất—nói cách khác là phần tử cha. Tuy nhiên, đối với các yếu tố được định vị tuyệt đối thì phức tạp hơn một chút. Trong trường hợp này, khối chứa là tổ tiên được định vị gần nhất. Theo “được định vị”, ý tôi là một phần tử có thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
0 được đặt thành 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
4, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
1 hoặc 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
2—nói cách khác, bất kỳ phần tử nào ngoại trừ phần tử tĩnh thông thường

Vì vậy, bằng cách đặt 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
11 cho một phần tử, bạn biến nó thành khối chứa cho bất kỳ phần tử con nào được định vị tuyệt đối (các phần tử con), cho dù chúng xuất hiện ngay bên dưới phần tử được định vị tương đối trong hệ thống phân cấp hay xa hơn nữa trong hệ thống phân cấp

Nếu một phần tử được định vị tuyệt đối không có tổ tiên được định vị, thì khối chứa được gọi là “khối chứa ban đầu”, trong thực tế tương đương với phần tử 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
12. Nếu bạn đang xem trang web trên màn hình, điều này có nghĩa là cửa sổ trình duyệt;

Các phần tử có vị trí cố định khác với điều này một chút—chúng luôn có khối chứa ban đầu làm khối chứa của chúng

Vì vậy, hãy tóm tắt điều này trong một tập hợp các bước đơn giản—để tìm khối chứa cho một phần tử có 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
13 , đây là việc bạn cần làm

  1. Nhìn vào phần tử cha của phần tử được định vị tuyệt đối—thuộc tính 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    0 của phần tử đó có một trong các giá trị 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    4, 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    1 hoặc 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    2 không?
  2. Nếu vậy, bạn đã tìm thấy khối chứa
  3. Nếu không, hãy di chuyển đến phần tử cha của cha mẹ và lặp lại từ bước 1 cho đến khi bạn tìm thấy khối chứa hoặc hết tổ tiên
  4. Nếu bạn đã đến phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    12 mà không tìm thấy tổ tiên đã định vị, thì khối chứa là phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    12

Định vị tuyệt đối

Định vị cố định là một dạng đặc biệt của định vị tuyệt đối, vì vậy chúng ta sẽ nghiên cứu về định vị đó sau và tập trung vào trường hợp tổng quát hơn ở đây. Trừ khi có quy định khác, khi tôi sử dụng thuật ngữ “có vị trí tuyệt đối” từ giờ cho đến cuối bài viết, tôi sẽ đề cập đến cả các phần tử có 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
00 và các phần tử có 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
13

Chỉ định vị trí

Với định vị tương đối, bạn đã học được rằng các thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
02, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
03, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
04 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
05 có thể được sử dụng để xác định vị trí của hộp. Bạn sử dụng các thuộc tính giống nhau để xác định vị trí của một hộp được định vị tuyệt đối, nhưng cách bạn sử dụng chúng hoàn toàn khác nhau

Đối với phần tử được định vị tương đối, bốn thuộc tính chỉ định khoảng cách tương đối để dịch chuyển hộp được tạo. Hãy nhớ rằng trong trường hợp định vị tương đối, chúng bổ sung cho nhau, do đó, 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
06 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
07 có nghĩa giống nhau và việc chỉ định cả 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
02 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
04 (hoặc 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
05 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
03) cho cùng một phần tử là không có ý nghĩa, bởi vì một trong các giá trị sẽ là

Những điểm này không đúng trong trường hợp định vị tuyệt đối. Ở đây, cả bốn thuộc tính có thể được sử dụng đồng thời, để xác định khoảng cách từ mỗi cạnh của phần tử được định vị đến cạnh tương ứng của khối chứa. Bạn cũng có thể chỉ định vị trí của một trong các góc của hộp được định vị tuyệt đối—giả sử bằng cách sử dụng 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
02 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
05—và sau đó chỉ định kích thước của hộp bằng cách sử dụng 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
44 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
45 (hoặc chỉ sử dụng không có 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
44 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
45 nếu bạn muốn

Microsoft Internet Explorer phiên bản 6 trở lên không hỗ trợ phương pháp chỉ định cả bốn cạnh, nhưng chúng hỗ trợ phương pháp chỉ định một góc cộng với kích thước

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
8

Điều cần nhớ ở đây là các giá trị bạn đặt cho các thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
02, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
03, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
04 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
05 chỉ định khoảng cách từ các cạnh của phần tử đến các cạnh khối chứa tương ứng của chúng. Nó không giống như trong một hệ tọa độ nơi mỗi giá trị tương ứng với một điểm gốc. Chẳng hạn, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
32 có nghĩa là cạnh phải của hộp được định vị tuyệt đối sẽ cách cạnh phải của khối chứa 2em

Điều cực kỳ quan trọng là phải biết khối chứa của bạn là gì khi bạn đang sử dụng định vị tuyệt đối. Đó là lý do tại sao việc đặt 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
11 trên khối chứa của bạn rất hữu ích, ngay cả khi bạn không thực sự thay đổi vị trí của hộp. Nó cho phép bạn tạo một phần tử thành khối chứa cho các phần tử con được định vị tuyệt đối của nó—nó cho phép bạn kiểm soát

Hãy thử một ví dụ để xem nó hoạt động như thế nào

  1. Sao chép mã bên dưới vào trình soạn thảo văn bản của bạn và lưu tài liệu dưới dạng tuyệt đối. html
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
5
  1. Tiếp theo, sao chép đoạn mã sau vào một tệp mới và lưu nó dưới dạng tuyệt đối. css
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
  1. Lưu cả hai tệp và tải tài liệu HTML vào trình duyệt của bạn. Bạn sẽ thấy một hình chữ nhật màu xám được bao quanh bởi đường viền màu đỏ rộng hơn một chút
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
1
  1. Bây giờ hãy xem điều gì sẽ xảy ra nếu bạn đặt 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34 ở vị trí tuyệt đối. Thêm phần khai báo được đánh dấu sau vào quy tắc 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
0
  1. Lưu và tải lại. Thay vì đường viền màu đỏ xung quanh hình chữ nhật màu xám, giờ đây chỉ có đường viền trên cùng trông giống như dày hơn. Và hộp màu xám không di chuyển chút nào. Bạn có mong đợi điều đó không?

Trước hết, việc đặt 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
34 ở vị trí tuyệt đối đã loại bỏ hoàn toàn nó khỏi luồng tài liệu. Điều đó có nghĩa là cha mẹ của nó, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
37, hiện không có con nào trong dòng bình thường, do đó, chiều cao của nó giảm xuống bằng không. Cái trông giống như đường màu đỏ dày 2px thực ra là đường viền 1px xung quanh một phần tử có chiều cao bằng 0—bạn đang nhìn thấy đường viền trên và dưới không có gì ở giữa

Điều thú vị thứ hai là hộp được định vị tuyệt đối không di chuyển. Giá trị mặc định cho các thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
02, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
03, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
04 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
05 là 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
72, có nghĩa là hộp được định vị tuyệt đối sẽ xuất hiện chính xác vị trí của nó nếu nó không được định vị. Tuy nhiên, vì nó bị xóa khỏi luồng nên nó sẽ chồng lên bất kỳ phần tử nào trong luồng thông thường đi theo nó. Điều này thực sự rất hữu ích—bạn có thể dựa vào điều này nếu bạn chỉ muốn di chuyển hộp đã tạo theo một chiều. Chẳng hạn, trong menu thả xuống do CSS điều khiển, các ngăn “thả xuống” có thể được định vị tuyệt đối chỉ với thuộc tính 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
02 được chỉ định. Sau đó, chúng sẽ xuất hiện ở tọa độ dự kiến ​​dọc theo trục X (giống như gốc của chúng), một cách tự động

  1. Tiếp theo, hãy đặt chiều cao cho phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37 để nó lại giống hình chữ nhật và di chuyển 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34 sang một bên. Thêm các dòng được đánh dấu sau vào quy tắc CSS của bạn
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
4
  1. Lưu và tải lại, bạn sẽ thấy một số thay đổi. Phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37 bây giờ lại là hình chữ nhật, vì bạn đã đặt chiều cao cho nó. Phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34 đã dịch chuyển sang một bên, nhưng không đến nơi bạn có thể mong đợi. Nó không phải là 1em từ đường viền bên trái của cửa sổ mẹ mà là 1em từ cạnh trái của cửa sổ. Lý do là, như đã giải thích ở trên, 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34 không có tổ tiên được định vị, vì vậy khối chứa của nó là khối chứa ban đầu. Nếu bạn chỉ định một vị trí khác với 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    72, thì vị trí đó có liên quan đến cạnh tương ứng của khối chứa. Khi bạn đặt 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    60, cạnh trái của 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34 kết thúc cách mép trái của cửa sổ 1em
  1. Thay vào đó, nếu bạn muốn nó cách cạnh trái của phần tử cha của nó 1em, thì bạn phải đặt phần tử gốc thành khối chứa. Để làm điều này, bây giờ bạn sẽ sử dụng thủ thuật mà tôi đã đề cập trước đó trong bài viết này—làm cho khối gốc có vị trí tương đối. Thêm dòng được đánh dấu sau vào quy tắc 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
3
  1. Lưu và tải lại—lo và kìa. Hình chữ nhật màu xám hiện cách đường viền bên trái của phần tử gốc 1em. Đặt 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    11 trên quy tắc 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37 đã làm cho nó được định vị và đặt nó làm khối chứa cho bất kỳ hậu duệ được định vị tuyệt đối nào mà nó có thể có. 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    60 bạn đặt cho 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34 hiện được tính từ cạnh trái của 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37, không phải cạnh trái của cửa sổ trình duyệt

Chỉ định kích thước

Các phần tử được định vị tuyệt đối sẽ co lại để phù hợp với nội dung của chúng trừ khi bạn chỉ định kích thước của chúng. Bạn có thể chỉ định chiều rộng bằng cách đặt thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
05 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
03 hoặc bằng cách đặt thuộc tính 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
44. Bạn có thể chỉ định chiều cao bằng cách đặt thuộc tính 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
02 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
04 hoặc bằng cách đặt thuộc tính 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
45

Bất kỳ thuộc tính nào trong số sáu thuộc tính này đều có thể được chỉ định dưới dạng phần trăm. Tỷ lệ phần trăm, theo bản chất của chúng, so với một cái gì đó khác. Trong trường hợp này, chúng có liên quan đến kích thước của khối chứa

Đối với phần tử được định vị tuyệt đối, giá trị phần trăm cho các thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
05, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
03 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
44 tương ứng với chiều rộng của khối chứa. Giá trị phần trăm cho các thuộc tính 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
02, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
04 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
45 có liên quan đến chiều cao của khối chứa

Internet Explorer 6 trở lên, cũng như Opera 8 trở lên, đã hiểu sai điều này và thay vào đó đã sử dụng kích thước của khối chính. Hãy thử nghiệm với một ví dụ khác để xem điều đó có thể tạo ra sự khác biệt lớn như thế nào

  1. Bắt đầu bằng cách chỉ định kích thước của 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34 sử dụng giá trị phần trăm—thực hiện các thay đổi sau đối với quy tắc 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
7
  1. Lưu và tải lại, bạn sẽ thấy hình chữ nhật màu xám trở nên rộng hơn và ngắn hơn (ít nhất là nếu bạn đang sử dụng trình duyệt hiện đại). Khối chứa vẫn là 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37, vì nó có 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    11. Chiều rộng của phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34 bây giờ bằng một nửa của 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37 và chiều cao của nó bằng một nửa chiều cao của 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37
  1. Hãy biến khung nhìn thành khối chứa một lần nữa, để thấy sự khác biệt. Thực hiện thay đổi sau thành 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
6
  1. Lưu và tải lại—khá khác biệt phải không? . Như bạn có thể thấy, việc biết các khối chứa của bạn là vô cùng cần thiết

Thứ nguyên thứ ba—z-index

Việc coi một trang web là hai chiều là điều tự nhiên. Công nghệ chưa phát triển đủ xa để màn hình 3D trở nên phổ biến, vì vậy chúng ta phải bằng lòng với chiều rộng và chiều cao cũng như hiệu ứng 3D giả. Nhưng kết xuất CSS thực sự xảy ra trong không gian ba chiều. Điều đó không có nghĩa là bạn có thể làm cho một phần tử lơ lửng phía trước màn hình—chưa—nhưng bạn có thể thực hiện một số việc hữu ích khác với các phần tử được định vị

Hai trục chính trong một trang web là trục X ngang và trục Y dọc. Điểm gốc của hệ tọa độ này nằm ở góc trên bên trái của khung nhìn, tức là nơi cả hai giá trị X và Y đều bằng 0. Nhưng cũng có một trục Z, mà chúng ta có thể tưởng tượng là chạy vuông góc với bề mặt màn hình (hoặc với giấy, khi in). Các giá trị Z cao hơn biểu thị vị trí “phía trước” các giá trị Z thấp hơn. Các giá trị Z cũng có thể âm, cho biết vị trí “đằng sau” một điểm quy chiếu nào đó (Tôi sẽ giải thích điểm quy chiếu này sau một phút)

Trước khi chúng ta tiếp tục, tôi nên cảnh báo bạn rằng đây là một trong những chủ đề phức tạp nhất trong CSS, vì vậy đừng nản lòng nếu bạn không hiểu nó trong lần đọc đầu tiên

Các phần tử được định vị (bao gồm cả các phần tử được định vị tương đối) được hiển thị trong một thứ được gọi là bối cảnh xếp chồng. Các phần tử trong ngữ cảnh xếp chồng có cùng điểm tham chiếu dọc theo trục Z. Tôi sẽ giải thích thêm về điều này dưới đây. Bạn có thể thay đổi vị trí Z (còn được gọi là mức ngăn xếp) của phần tử được định vị bằng thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508. Giá trị có thể là một số nguyên (có thể là số âm) hoặc một trong các từ khóa 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
72 hoặc 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
510. Giá trị mặc định là 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
72, có nghĩa là phần tử có cùng mức ngăn xếp với phần tử gốc của nó

Bạn nên lưu ý rằng bạn chỉ có thể chỉ định vị trí chỉ mục dọc theo trục Z. Bạn không thể làm cho một phần tử xuất hiện 19 pixel phía sau hoặc 5 cm phía trước phần tử khác. Hãy nghĩ về nó giống như một cỗ bài. bạn có thể xếp chồng các quân bài và quyết định rằng quân át bích phải nằm trên ba quân kim cương—mỗi quân bài có cấp độ xếp hoặc chỉ số Z

Nếu bạn chỉ định 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508 là một số nguyên dương, thì bạn chỉ định cho nó một cấp độ ngăn xếp “phía trước” các phần tử khác trong cùng bối cảnh xếp chồng có cấp độ ngăn xếp thấp hơn. Một 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508 của 0 (không) có nghĩa giống như 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
72, nhưng có một sự khác biệt mà tôi sẽ quay lại sau một phút nữa. Giá trị số nguyên âm cho 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508 chỉ định cấp độ ngăn xếp “đằng sau” cấp độ ngăn xếp của cha mẹ

Khi hai phần tử trong cùng ngữ cảnh xếp chồng có cùng cấp độ ngăn xếp, phần tử xuất hiện sau trong mã nguồn sẽ xuất hiện trên phần tử anh chị em trước đó của nó

Trên thực tế, có thể có không ít hơn bảy lớp trong một ngữ cảnh xếp chồng và bất kỳ số lượng phần tử nào trong các lớp đó, nhưng đừng lo lắng—bạn không có khả năng phải xử lý bảy lớp trong một ngữ cảnh xếp chồng. Thứ tự hiển thị các phần tử (tất cả các phần tử, không chỉ các phần tử được định vị) trong một bối cảnh xếp chồng, từ sau ra trước như sau

  1. Nền và đường viền của các phần tử tạo thành bối cảnh xếp chồng
  2. Con cháu được định vị với mức ngăn xếp âm
  3. Hậu duệ cấp khối trong luồng thông thường
  4. hậu duệ nổi
  5. Hậu duệ cấp nội tuyến trong luồng thông thường
  6. Con cháu được định vị với mức ngăn xếp được đặt là 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    72 hoặc (không)
  7. Định vị hậu duệ với mức ngăn xếp tích cực

Các mục được đánh dấu là các phần tử có cấp độ ngăn xếp mà chúng ta có thể thay đổi bằng cách sử dụng thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508

Toàn bộ điều này có thể khá khó tưởng tượng, vì vậy hãy làm một số thí nghiệm thực tế để minh họa chỉ số Z

  1. Bắt đầu bằng cách thêm dòng được đánh dấu sau vào tài liệu mẫu nhỏ của bạn
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
07
  1. Tiếp theo, tôi sẽ giúp bạn khôi phục CSS của bạn để 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37 là khối chứa và đặt kích thước không theo tỷ lệ phần trăm của 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34. Hãy làm cho 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37 cũng cao hơn một chút để bạn có nhiều không gian hơn để thử nghiệm. Thực hiện các thay đổi được đánh dấu sau đối với hai quy tắc
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
50
  1. Thêm quy tắc cho phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    521 nữa
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
51
  1. Lưu và tải lại, bạn sẽ thấy một hộp màu xanh sáng chồng lên một hộp màu xám. Cả hai hộp đều có cùng mức ngăn xếp (
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    72, giá trị ban đầu, có nghĩa là mức ngăn xếp 0) nhưng hộp màu xanh lam được hiển thị trước hộp màu xám vì hộp này xuất hiện sau trong mã nguồn. Bạn có thể làm cho hộp màu xám xuất hiện phía trước bằng cách đặt cho nó mức ngăn xếp dương. Bạn chỉ cần đặt nó lớn hơn 0—không cần phải quá nhiệt tình và sử dụng giá trị như 10000. Thêm dòng được đánh dấu sau vào quy tắc 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
52
  1. Lưu và tải lại, bây giờ bạn sẽ thấy hộp màu xám xuất hiện trước hộp màu xanh

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

Phần còn lại của phần này thảo luận về ngữ cảnh xếp chồng cục bộ. Đây có lẽ không phải là điều bạn sẽ gặp phải trong công việc thiết kế bình thường của mình trừ khi bạn cố gắng thực hiện một số điều thực sự nâng cao với định vị tuyệt đối, nhưng tôi nghĩ tôi nên đưa nó vào cho đầy đủ. Bạn có thể chọn bỏ qua điều này nếu bạn muốn

Mọi phần tử có 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508 được chỉ định làm số nguyên sẽ thiết lập ngữ cảnh xếp chồng mới, “cục bộ”, trong đó chính phần tử đó có cấp độ ngăn xếp 0. Đây là sự khác biệt mà tôi đã đề cập trước đây giữa 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
525 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
526. Cái trước không thiết lập bối cảnh xếp chồng mới, nhưng cái sau thì có

Khi một phần tử thiết lập ngữ cảnh xếp chồng cục bộ, các mức xếp chồng của phần tử con được định vị của nó chỉ áp dụng trong ngữ cảnh cục bộ này. Những con cháu này có thể được xếp chồng lên nhau đối với nhau và đối với cha mẹ của chúng, nhưng không phải đối với anh chị em của cha mẹ. Nó giống như cha mẹ tạo ra một cái “lồng” xung quanh con cháu của nó, để chúng không thể trốn thoát khỏi nó. Con cháu có thể di chuyển lên xuống trong lồng này, nhưng không thể ra khỏi lồng. Cha mẹ và con cháu của nó sẽ tạo thành một đơn vị không thể chia cắt trong bối cảnh xếp chồng bao quanh cha mẹ

Hãy tưởng tượng bạn đang phân loại giấy tờ của mình trước khi giao nó cho kế toán, người sẽ thực hiện các khoản thuế của bạn. Bạn có báo cáo chi phí, biên lai, xác nhận đơn đặt hàng, v.v., và bạn xếp giấy này lên giấy khác—để giúp công việc kế toán của bạn dễ dàng hơn, bạn nhét các loại giấy tờ thuộc về nhau vào các phong bì khác nhau

Bối cảnh xếp chồng cục bộ tương tự như một phong bì như vậy. Nó giữ các phần tử liên quan với nhau và ngăn không cho các phần tử khác chèn vào giữa chúng. Bạn có thể sắp xếp nội dung bên trong mỗi phong bì theo ý muốn, nhưng thứ tự sắp xếp đó chỉ áp dụng trong phong bì đó và không ảnh hưởng đến toàn bộ chồng giấy. Ngăn xếp của bạn hiện chứa hỗn hợp các tờ giấy rời (các phần tử có cấp độ ngăn xếp 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
72) và phong bì (các phần tử có cấp độ ngăn xếp số nguyên). Các phong bì có mức chồng dương nằm trên cùng của các tờ giấy rời, trong khi các phong bì có mức chồng âm xuất hiện ở dưới cùng của đống

Mỗi khi bạn gán một giá trị số nguyên cho thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508 cho một phần tử, bạn sẽ tạo một “phong bì” chứa phần tử đó và phần tử con của nó

Hãy xem cách hoạt động của các ngữ cảnh xếp chồng cục bộ đó. Nó có thể trông khó hiểu, nhưng nó thực sự không khác nhiều so với những gì bạn đã thấy. Nếu bạn làm theo các ví dụ, bạn sẽ có thể cảm nhận được mọi thứ hoạt động như thế nào

  1. Bắt đầu bằng cách thêm một số nội dung vào hai phần tử bên trong của bạn—thêm các dòng được đánh dấu vào tài liệu HTML của bạn
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
53
  1. Thêm một quy tắc CSS sẽ áp dụng cho cả hai phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    529 đó
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
54

Điều này làm cho các phần tử 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
529 được định vị tuyệt đối và thiết lập vị trí và kích thước của chúng. Tuy nhiên, hãy đợi một chút—
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
529 phần tử là nội tuyến—làm cách nào bạn có thể chỉ định thứ nguyên cho các phần tử nội tuyến? . Các vị trí bạn chỉ định sẽ áp dụng tương ứng với từng khối chứa của 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
529. Vì cả hai phần tử 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
529 đều có một vị trí tuyệt đối là 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
534 làm cha, những phần tử cha đó đảm nhận vai trò chứa các khối

  1. Bây giờ, hãy thêm một số màu vào các phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    529 để bạn có thể thấy chúng xuất hiện ở đâu. Hãy thêm các quy tắc sau vào biểu định kiểu của bạn
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
55
  1. Lưu và tải lại, bạn sẽ thấy một hình vuông màu vàng ở góc dưới bên phải của hình vuông lớn hơn màu xám và một hình vuông màu lục lam ở góc dưới cùng bên phải của hình vuông lớn hơn màu xanh lam. Các hình vuông màu xám và màu vàng xuất hiện trước các hình vuông màu lam và lục lam, vì hình vuông màu xám có 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    536
  1. Điều gì sẽ xảy ra nếu bạn muốn hình vuông màu lục lam ở phía trước tất cả các hình vuông khác? . Trên thực tế, nó đủ để cung cấp cho nó cùng cấp độ ngăn xếp với hình vuông màu xám, vì hình vuông màu lục lam xuất hiện sau trong phần đánh dấu. Hãy thử điều đó—thực hiện thay đổi sau đối với CSS của bạn
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
56
  1. Lưu và tải lại. Nếu trình duyệt của bạn hỗ trợ đúng đề xuất CSS, thì hình vuông màu lục lam sẽ ở phía trước. Hình vuông màu xám có 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    536 , có nghĩa là nó thiết lập bối cảnh xếp chồng cục bộ. Nói cách khác, bạn đã tạo một trong những “phong bì” đó và đặt hình vuông màu xám và hình vuông con màu vàng của nó vào bên trong.

Bối rối chưa?

  1. Đặt mức ngăn xếp cao cho hình vuông màu vàng để đưa nó lên phía trước—thực hiện thay đổi sau đối với CSS của bạn
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
57
  1. Nếu bạn lưu và tải lại, bạn sẽ thấy…không thay đổi gì cả. Mức ngăn xếp mà chúng tôi đã chỉ định cho hình vuông màu vàng áp dụng trong bối cảnh xếp chồng cục bộ do hình vuông màu xám thiết lập—hình vuông màu vàng nằm bên trong một phong bì cùng với phần tử gốc màu xám của nó. Bạn có thể di chuyển hình vuông màu lục lam lên phía trước vì cha của nó (hình vuông màu xanh lam) không thiết lập ngữ cảnh xếp chồng cục bộ—nó có hàm ý là 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    538. Hình vuông màu xanh là một tờ giấy rời trong ngăn xếp. Khu vực hình vuông màu vàng và màu lục lam thực sự nằm trong các phong bì nhỏ (chúng có cấp ngăn xếp số nguyên và thiết lập bối cảnh xếp chồng cục bộ của riêng chúng)
  1. Nếu bạn làm cho hình vuông màu xanh thiết lập ngữ cảnh xếp chồng cục bộ, bạn sẽ không thể di chuyển hình vuông màu lục lam lên phía trước trừ khi bạn cũng đưa hình vuông gốc của nó (hình vuông màu xanh) lên phía trước. Hãy dùng thử—thực hiện các thay đổi sau đối với CSS của bạn
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
58
  1. Lưu và tải lại. Bây giờ, cả hình vuông màu xám và hình vuông màu xanh lam đều thiết lập bối cảnh xếp chồng cục bộ, cho chúng ta hai phong bì. Ở cuối ngăn xếp là một phong bì với ngăn xếp cấp 1, chứa hai phong bì bên trong (hình vuông màu xanh lam và hình vuông màu lục lam). Ở trên cùng của ngăn xếp là một phong bì với ngăn xếp cấp 2, chứa hai phong bì bên trong (hình vuông màu xám và hình vuông màu vàng). Trong phong bì đầu tiên, hình vuông màu xanh lam có cấp độ ngăn xếp cục bộ là 0, do đó xuất hiện phía sau hình vuông màu lục lam, có cấp độ ngăn xếp cục bộ là 3. Trong phong bì thứ hai, hình vuông màu xám có mức ngăn xếp cục bộ 0, do đó xuất hiện phía sau hình vuông màu vàng với mức ngăn xếp cục bộ 4. Hình 1 hiển thị bốn hộp và hai ngữ cảnh xếp chồng cục bộ từ bên cạnh, dọc theo trục Z

Hình 1. Minh họa các bối cảnh xếp chồng khác nhau. Các phần tử xuất hiện bên trong "2" sẽ luôn xuất hiện trước tất cả các phần tử bên trong "1". Sau đó, trong mỗi bối cảnh xếp chồng, các phần tử có số chỉ mục z cao hơn sẽ xuất hiện trước các phần tử có số chỉ mục z nhỏ. Nếu hai phần tử có cùng số chỉ mục z, phần tử xuất hiện sau trong đánh dấu sẽ xuất hiện trước

Phần này có lẽ khá khó hiểu, đặc biệt nếu bạn là người mới sử dụng CSS. Vấn đề là bạn cần biết bối cảnh xếp chồng của mình nếu bạn đang cố thay đổi mức xếp chồng của các phần tử khác nhau. Nếu một phần tử thuộc ngữ cảnh xếp chồng cục bộ, bạn chỉ có thể thay đổi vị trí của nó dọc theo trục Z trong ngữ cảnh cục bộ đó. Một phần tử trong một ngữ cảnh xếp chồng cục bộ không thể trượt vào giữa hai phần tử trong một ngữ cảnh xếp chồng cục bộ khác

Tin tốt là rất có thể bạn sẽ không bao giờ gặp phải những vấn đề này. Các thay đổi trong 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508 không phổ biến lắm trong các bố cục tốt và nếu chúng xảy ra thì đó thường là trong một bối cảnh xếp chồng

định vị cố định

Một phần tử có 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
00 được cố định đối với chế độ xem. Nó vẫn ở nguyên vị trí của nó, ngay cả khi tài liệu được cuộn. Đối với 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
541, một phần tử cố định sẽ được lặp lại trên mỗi trang in

Lưu ý rằng Internet Explorer phiên bản 6 trở lên hoàn toàn không hỗ trợ định vị cố định. Nếu bạn sử dụng một trong những trình duyệt đó, bạn sẽ không thể xem kết quả của các ví dụ trong phần này

Trong khi vị trí và kích thước của phần tử có 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
13 có liên quan đến khối chứa của nó thì vị trí và kích thước của phần tử có 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
00 luôn có liên quan đến khối chứa ban đầu. Đây thường là khung nhìn. cửa sổ trình duyệt hoặc hộp trang của tờ báo. Để chứng minh điều này, trong ví dụ bên dưới, bạn sẽ cố định một trong các thành phần của mình. Bạn sẽ làm cho cái còn lại rất cao để tạo thanh cuộn, giúp bạn dễ dàng nhìn thấy hiệu ứng mà nó mang lại

  1. Thực hiện các thay đổi sau đối với mã CSS của bạn
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
59
  1. Lưu và tải lại. Nếu bạn không nhận được thanh cuộn dọc, hãy tăng giá trị 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    45 cho 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    521. (Dù sao thì bạn có loại màn hình khổng lồ nào vậy?) Phần tử màu xanh dương cao vượt ra ngoài đáy cửa sổ. Cuộn trang xuống dưới và để mắt đến hình vuông màu xám ở góc trên cùng bên trái. 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    34 hiện được cố định ở vị trí 1em từ trên cùng của cửa sổ và 1em từ phía bên trái, do đó, khi bạn cuộn, hộp màu xám sẽ ở cùng một vị trí trên màn hình

Bản tóm tắt

Các phần tử được định vị tuyệt đối được xóa hoàn toàn khỏi luồng tài liệu. Chúng sẽ chồng lên nội dung khác trừ khi bạn nhường chỗ cho chúng. Nếu tất cả các phần tử con của vùng chứa được định vị tuyệt đối, chiều cao của phần tử cha sẽ thu gọn về 0. Các phần tử được định vị tuyệt đối được định vị đối với một khối chứa, đó là tổ tiên được định vị gần nhất. Nếu không có tổ tiên được định vị, khung nhìn sẽ là khối chứa


Các thành phần có vị trí cố định được cố định đối với khung nhìn—khung nhìn luôn là khối chứa chúng. Chúng luôn xuất hiện ở cùng một vị trí bên trong cửa sổ trình duyệt khi được xem trên màn hình; . Vị trí của mỗi cạnh của một phần tử được định vị tuyệt đối có thể được chỉ định bằng các thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
02, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
03, 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
04 và 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
05. Giá trị của mỗi thuộc tính xác định khoảng cách của cạnh đó đến cạnh tương ứng của khối chứa phần tử


Tất cả các phần tử được định vị được hiển thị ở một cấp độ ngăn xếp nhất định trong bối cảnh xếp chồng. Bạn có thể thay đổi cấp độ ngăn xếp của phần tử được định vị bằng thuộc tính 

html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508. Khi 
html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
508 được chỉ định làm giá trị số nguyên, phần tử sẽ thiết lập ngữ cảnh xếp chồng cục bộ cho phần gốc của nó

câu hỏi bài tập

  • Hoàn tác các thay đổi từ ví dụ định vị cố định và sau đó thay đổi thứ tự xếp chồng giữa bốn ô vuông được định vị tuyệt đối để ô vuông màu xám ở phía sau, theo sau là các ô vuông màu lam, vàng và lục lam theo thứ tự đó. (Mẹo. xóa tất cả các khai báo 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    508 và bắt đầu lại. )
  • Di chuyển hình vuông màu vàng lên và sang phải bằng cách đặt 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    554 và 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    555. Sau đó làm cho nó xuất hiện phía sau phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    37 để đường viền màu đỏ xuất hiện trên hình vuông màu vàng
  • Sao chép bố cục ba cột mà chúng tôi đã tạo trong bài viết định vị tĩnh và tương đối bằng cách sử dụng định vị tuyệt đối thay thế. Vì không thể có chân trang có chiều rộng đầy đủ, bạn có thể xóa phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    557, nhưng bạn không được phép thay đổi bất kỳ thứ gì khác trong phần đánh dấu (ngoài liên kết đến biểu định kiểu)
  • Sửa đổi bố cục từ bài tập trước để điều hướng sử dụng định vị cố định. Bạn sẽ phải xóa các lề ngang tự động trên phần tử 
    html, body {
   margin: 0;
   padding: 0;
 }
 
 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }
 
 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }
    558 để thực hiện điều này. Thêm đủ nội dung vào cột chính và/hoặc thanh bên để làm cho thanh cuộn xuất hiện để bạn có thể xác minh rằng nó hoạt động

Ghi chú. Tài liệu này ban đầu được xuất bản như một phần của Chương trình giảng dạy tiêu chuẩn Web Opera, có sẵn dưới dạng 37. Định vị tuyệt đối và cố định CSS, được viết bởi Tommy Olsson. Giống như bản gốc, nó được xuất bản theo Creative Commons Ghi công, Phi thương mại - Chia sẻ tương tự 2. 5 giấy phép

Vị trí tuyệt đối trong CSS là gì?

Phần tử được định vị tuyệt đối là phần tử có giá trị vị trí được tính là tuyệt đối hoặc cố định . Các thuộc tính top , right , bottom và left chỉ định độ lệch từ các cạnh của khối chứa phần tử. (Khối chứa là tổ tiên liên quan đến phần tử được định vị. )

Vị trí tương đối và CSS tuyệt đối là gì?

Chức vụ. tương đối đặt một phần tử so với vị trí hiện tại của nó mà không thay đổi bố cục xung quanh nó, trong khi vị trí. tuyệt đối đặt một phần tử so với vị trí của phần tử gốc và thay đổi bố cục xung quanh nó

Tại sao CSS vị trí Tuyệt đối không hoạt động?

Nếu bạn đang đặt một phần tử có vị trí tuyệt đối, bạn cần phần tử cơ sở có giá trị vị trí khác với giá trị mặc định . Trong trường hợp của bạn, nếu bạn thay đổi giá trị vị trí của div gốc thành 'tương đối', bạn có thể khắc phục sự cố.

Sự khác biệt giữa vị trí tĩnh và vị trí tuyệt đối là gì?

Tĩnh - đây là giá trị mặc định, tất cả các phần tử được sắp xếp theo thứ tự xuất hiện trong tài liệu. Tương đối - phần tử được định vị so với vị trí bình thường của nó. Tuyệt đối - phần tử được định vị tuyệt đối so với cha được định vị đầu tiên của nó . Đã sửa lỗi - phần tử được định vị liên quan đến cửa sổ trình duyệt.

programming css

Bài Viết Liên Quan

Phép lai nào dưới đây là phép lai phân tích năm 2024
Phép lai nào dưới đây là phép lai phân tích năm 2024

mẹo hay Cryto Phân tích
Cách phiên âm toán tiếng anh lớp 4 năm 2024
Cách phiên âm toán tiếng anh lớp 4 năm 2024

mẹo hay Mẹo Hay Cách Học Tốt Tiếng anh Daily routines
Đội bóng nào vô địch world cup đầu tiên năm 2024
Đội bóng nào vô địch world cup đầu tiên năm 2024

mẹo hay Kết thúc, 7/12/22 Maroc Tây Ban Nha Kết thúc, 2/12/22 Nhật Bản Kết thúc, 28/11/22 Đức
Bạn hiểu bản sắc văn hóa dân tộc là gì năm 2024
Bạn hiểu bản sắc văn hóa dân tộc là gì năm 2024

là ai Hỏi Đáp Là gì
0 2 ha đến 0 4 ha là gì năm 2024
0 2 ha đến 0 4 ha là gì năm 2024

là ai Hỏi Đáp Là gì
Cách vô hiệu hóa khay màn hình trên iphone năm 2024
Cách vô hiệu hóa khay màn hình trên iphone năm 2024

mẹo hay Mẹo Hay Cách Công Nghệ Iphone Màn hình
Chức năng của phòng kế toán trong công ty năm 2024
Chức năng của phòng kế toán trong công ty năm 2024

mẹo hay
Chế độ kế toán doanh nghiệp vừa và nhỏ 2023 năm 2024
Chế độ kế toán doanh nghiệp vừa và nhỏ 2023 năm 2024

mẹo hay
Real madrid vô địch c1 những năm nào năm 2024
Real madrid vô địch c1 những năm nào năm 2024

mẹo hay Cúp C1
Phương pháp tế bào học là gì năm 2024
Phương pháp tế bào học là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Học Phương pháp
Kênh nào truyền hình trực tiếp cúp c1 năm 2024
Kênh nào truyền hình trực tiếp cúp c1 năm 2024

mẹo hay
Giám đốc sở khoa học công nghệ thanh hóa năm 2024
Giám đốc sở khoa học công nghệ thanh hóa năm 2024

mẹo hay Học Tốt Học Công Nghệ Công nghệ Tạ Văn Đẹp
Chức năng thu hộ và chức năng thanh toán năm 2024
Chức năng thu hộ và chức năng thanh toán năm 2024

mẹo hay
Trong đó chi phí lãi vay tiếng anh là gì năm 2024
Trong đó chi phí lãi vay tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Mũi tên chỉ hướng tiếng anh là gì năm 2024
Mũi tên chỉ hướng tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Mũi tên icon ARROW
Bản vẽ autocad nhà cao tầng lê văn duy năm 2024
Bản vẽ autocad nhà cao tầng lê văn duy năm 2024

mẹo hay Xây Đựng Nhà Thư viện autocad Bản vẽ cad Lisp Print autocad Bản vẽ nhà
Làm cách nào để giảm mỡ bụng tại nhà năm 2024
Làm cách nào để giảm mỡ bụng tại nhà năm 2024

mẹo hay Mẹo Hay Cách Xây Đựng Nhà
Họ hụi biêu phường là gì năm 2024
Họ hụi biêu phường là gì năm 2024

là ai Hỏi Đáp Là gì Biêu là gì Hụi la gì Cách chơi phường
Lỗi ổ đĩa c hiện biểu tuợng giấy trắng năm 2024
Lỗi ổ đĩa c hiện biểu tuợng giấy trắng năm 2024

mẹo hay Download IconPackager
Ngày 26 12 là cung gì năm 2024
Ngày 26 12 là cung gì năm 2024

là ai Cung Ma Kết

Quảng Cáo

Có thể bạn quan tâm

Tilt brush the lab at google cultural institute là gì năm 2024
1 ngày trước . bởi SilveryCrossover
Cho cạnh ac b cosa tính sina toán 10 năm 2024
1 ngày trước . bởi MonthlyConfiguration
Khi nào khởi tố vụ án hình sự năm 2024
1 ngày trước . bởi DwindlingSeduction
Sự kiện pháp lý là gì cho ví dụ năm 2024
1 ngày trước . bởi Second-classReaction
Cho thue mặt tiền làm văn phòng quận 2 tphcm năm 2024
1 ngày trước . bởi ProperHearth
Văn hóa an toàn tại nơi làm việc là gì năm 2024
1 ngày trước . bởi TirelessJurisprudence
Đơn vị chấp nhận thanh toán là gì năm 2024
1 ngày trước . bởi AnsweringPessimism
Dđàu năm nên đi lễ chùa nào ở miền bắc năm 2024
1 ngày trước . bởi Heavy-dutyAdvert
Bưu cục viettel post hóa an đồn nai năm 2024
1 ngày trước . bởi SucculentProcessing
Các đoạn nhạc trong video gọi là gì năm 2024
1 ngày trước . bởi ImmutableBookmark

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Bài tập có lời giải tổ chức thi công năm 2024
1 tuần trước . bởi VolubleBrowsing
Last seen recently nghĩa là gì năm 2024
6 ngày trước . bởi High-levelRelaxation
Dđiện trở các cặp dây máy nén là bao nhiêu năm 2024
1 tuần trước . bởi TelevisedNarration
Vietnam airline được ký gửi bao nhiêu kg năm 2024
1 tuần trước . bởi ProlongedSeating
Eé máy bay từ pháp về vn bao nhiêu năm 2024
1 tuần trước . bởi EvolutionaryCloseness
Bài văn viết về sở thích bằng tiếng anh năm 2024
3 ngày trước . bởi SucceedingSubcommittee
Bê tông thương phẩm mác 250 là gì năm 2024
3 ngày trước . bởi AttentivePrivacy
Tuổi tân mùi hợp tuổi nào mở hàng khai trương năm 2024
1 ngày trước . bởi PatrioticBonding
Cấu trúc so sánh gấp bao nhiêu lần năm 2024
1 tuần trước . bởi WeeFeedback
Hướng dẫn cách nộp hồ sơ quyết toán thuế tncn năm 2024
1 tuần trước . bởi Hard-pressedSomewhere

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 boxhoidap.com Inc.