CSS kết xuất bên ngoài cha mẹ

Question

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


 
   
     
     Absolute Positioning
     
   
   
     
       
     
 Nội dung chính Show
 chứa các khối
Định vị tuyệt đối
Chỉ định vị trí
Chỉ định kích thước
Thứ nguyên thứ ba—z-index
định vị cố định
Phần kết luận
Làm cách nào để ghi đè phần đệm gốc trong CSS?
Làm thế nào một div con có thể phù hợp với div cha?
Sự khác biệt giữa vị trí cố định và tuyệt đối là gì?
Tại sao chỉ số Z của tôi không hoạt động?

8—


 
   
     
     Absolute Positioning

9 và

html, body {
   margin: 0;
   padding: 0;
 }

 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }

0. 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;
 }

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ó 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

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, chúng ta sẽ thấy một số ví dụ thực tế về việc sử dụng cả định vị


 
   
     
     Absolute Positioning

9 và

html, body {
   margin: 0;
   padding: 0;
 }

 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }

0, 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 tất cả những điều đó, chúng ta hãy đề cập đến một khái niệm tiên quyết cần thiết—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ị”, chúng tôi muốn nói đến một phần tử có thuộc tính


 
   
     
     Absolute Positioning

8 đượ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;
 }

2,


 
   
     
     Absolute Positioning

9 hoặc

html, body {
   margin: 0;
   padding: 0;
 }

 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }

0—nói cách khác, bất kỳ thứ gì ngoại trừ các 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;
 }

9 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 cấu trúc phân cấp hay xa hơn nữa trong cấu trúc 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ử

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

0. 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ó

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

1 , đây là việc bạn cần làm

Nhìn vào phần tử cha của phần tử được định vị tuyệt đối—thuộc tính


 
   
     
     Absolute Positioning

8 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;
 }

2,


 
   
     
     Absolute Positioning

9 hoặc

html, body {
   margin: 0;
   padding: 0;
 }

 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }

0 không?

Nếu vậy, bạn đã tìm thấy khối chứa
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

Nếu bạn đã đến phần tử

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

0 mà không tìm thấy tổ tiên đã định vị, thì khối chứa là phần tử

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

0

Đị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ờ đến cuối bài viết, tôi sẽ đề cập đến cả những yếu tố có

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

8 và yếu tố có

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

1

Chỉ định vị trí

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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

0,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

1,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3 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 đó,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

4 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

5 có nghĩa giống nhau và việc chỉ định cả

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

0 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 (hoặc

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

1) 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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

0 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3—và sau đó chỉ định kích thước của hộp bằng cách sử dụng

#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 và

#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3 (hoặc chỉ cần sử dụng no

#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 và

#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3 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

/* This method works in IE6 */
#foo {
  position: absolute;
  top: 3em;
  left: 0;
  width: 30em;
  height: 20em;
}

/* This method doesn't work in IE6 */
#foo {
  position: absolute;
  top: 3em;
  right: 0;
  bottom: 3em;
  left: 0;
}

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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

0,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

1,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3 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,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

0 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;
 }

9 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

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


 
   
     
     Absolute Positioning

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;
 }

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
Phần tử
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }
```
2 có chiều rộng và chiều cao được chỉ định và màu nền xám. Phần tử
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }
```
3, là cấu trúc cha của
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }
```
2, có đường viền màu đỏ. Nó cũng có lề 5em xung quanh, để dịch chuyển nó ra khỏi các cạnh của cửa sổ trình duyệt và cho chúng tôi thấy rõ hơn những gì đang diễn ra. Không có gì đáng ngạc nhiên cho đến nay, phải không?

Bây giờ hãy xem điều gì sẽ xảy ra nếu bạn đặt

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

2 ở vị trí tuyệt đối. Thêm phần khai báo được đánh dấu sau vào quy tắc

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

2

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

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?

Có hai điều thú vị xảy ra ở đây

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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

2 ở 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ó,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3, hiện không có con nào thuộc dòng chảy 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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

0,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

1,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3 là

5, 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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

0 đượ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

Tiếp theo, hãy đặt chiều cao cho phần tử

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3 để nó trông giống hình chữ nhật một lần nữa và di chuyển

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

2 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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

Lưu và tải lại, bạn sẽ thấy một số thay đổi. Phần tử
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }
```
3 bây giờ lại là hình chữ nhật, vì bạn đã đặt chiều cao cho nó. Phần tử
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }
```
2 đã 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,
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }
```
2 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
```
   
     
     
   
 
```
5, thì vị trí đó có liên quan đến cạnh tương ứng của khối chứa. Khi bạn đặt
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 8em; position: relative;
 }

 #inner {
   width: 5em; height: 5em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }
```
3, cạnh trái của
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }
```
2 kết thúc cách mép trái của cửa sổ 1em

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;
 }

9 trên quy tắc

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3 đã 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ó.

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 8em; position: relative;
 }

 #inner {
   width: 5em; height: 5em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3 bạn đặt cho

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

2 hiện được tính từ cạnh trái của

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3, 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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

1 hoặc bằng cách đặt thuộc tính

#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2. Bạn có thể chỉ định chiều cao bằng cách đặt thuộc tính

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

0 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 hoặc bằng cách đặt thuộc tính

#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3

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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

1 và

#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

0,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 và

#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3 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

Bắt đầu bằng cách chỉ định kích thước của

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

2 bằng cách sử dụng các giá trị phần trăm—thực hiện các thay đổi sau đối với quy tắc

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

2

#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

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à

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3, vì nó có

html, body {
   margin: 0;
   padding: 0;
 }

 #outer {
   margin: 5em;
   border: 1px solid #f00;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
 }

9. Chiều rộng của phần tử

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

2 hiện bằng một nửa của phần tử

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3 và chiều cao của nó bằng một nửa chiều cao của phần tử

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3

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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

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 tôi tiếp tục, hãy lưu ý 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 gọi là mức ngăn xếp) của một phần tử được định vị bằng cách sử dụng thuộc tính


 
   
     
     Absolute Positioning

10. 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

5 hoặc


 
   
     
     Absolute Positioning

12. Giá trị mặc định là

5, 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


 
   
     
     Absolute Positioning

10 là số nguyên dương, bạn chỉ định cho nó một cấp độ ngăn xếp “đứng trước” các phần tử khác trong cùng ngữ cảnh xếp chồng có cấp độ ngăn xếp thấp hơn. Một


 
   
     
     Absolute Positioning

10 của 0 (không) có nghĩa giống như

5, 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


 
   
     
     Absolute Positioning

10 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—bạn sẽ khô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

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
Con cháu được định vị với mức ngăn xếp âm
Hậu duệ cấp khối trong luồng bình thường
hậu duệ nổi
Hậu duệ cấp nội tuyến trong luồng thông thường
Đã định vị hậu duệ với mức ngăn xếp được đặt là
```
   
     
     
   
 
```
5 hoặc (không)
Đị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


 
   
     
     Absolute Positioning

10

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

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
```
   
     
     
   
 
```

Tiếp theo, tôi sẽ yêu cầu bạn khôi phục CSS của bạn để

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3 là khối chứa và đặt kích thước không theo tỷ lệ phần trăm là

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

2. Hãy làm cho

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }

3 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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 8em; position: relative;
 }

 #inner {
   width: 5em; height: 5em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

Thêm quy tắc cho phần tử


 
   
     
     Absolute Positioning

23 nữa

#second {
   width: 5em;
   height: 5em;
   background-color: #00f;
   position: absolute;
   top: 1em;
   left: 2em;
 }

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 cấp độ ngăn xếp (_______61_______5, giá trị ban đầu, có nghĩa là cấp độ 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
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }
```
2
```
 
   
     
     Absolute Positioning
     
   
   
     
       
     
   
 
```
0
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ó


 
   
     
     Absolute Positioning

10 đượ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


 
   
     
     Absolute Positioning

27 và


 
   
     
     Absolute Positioning

28. 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ó cá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ào 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

5) 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


 
   
     
     Absolute Positioning

10 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

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
```
 
   
     
     Absolute Positioning
     
   
   
     
       
     
   
 
```
1

Thêm một quy tắc CSS sẽ áp dụng cho cả hai phần tử


 
   
     
     Absolute Positioning

31 đó


 
   
     
     Absolute Positioning

2

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


 
   
     
     Absolute Positioning

31 đượ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 giây—


 
   
     
     Absolute Positioning

31 phần tử nằm trong dòng—làm cách nào bạn có thể chỉ định thứ nguyên cho các phần tử trong dòng? . 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


 
   
     
     Absolute Positioning

31. Vì cả hai phần tử


 
   
     
     Absolute Positioning

31 đều có vị trí tuyệt đối là


 
   
     
     Absolute Positioning

36 với tư cách là phần tử cha, những phần tử cha đó đảm nhận vai trò chứa các khối

Bây giờ, hãy thêm một số màu vào các phần tử


 
   
     
     Absolute Positioning

31 để bạn có thể thấy chúng xuất hiện ở đâu. Thêm các quy tắc sau vào biểu định kiểu của bạn


 
   
     
     Absolute Positioning

3

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 xanh dương và màu lục lam, vì hình vuông màu xám có
```
 
   
     
     Absolute Positioning
     
   
   
     
       
     
   
 
```
38
Đ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
```
 
   
     
     Absolute Positioning
     
   
   
     
       
     
   
 
```
4
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ó
```
 
   
     
     Absolute Positioning
     
   
   
     
       
     
   
 
```
38 , có nghĩa là nó thiết lập ngữ 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?

Đặ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
```
 
   
     
     Absolute Positioning
     
   
   
     
       
     
   
 
```
5
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 ngữ 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 ý ____0_______40. Hình vuông màu xanh là một tờ giấy rời trong ngăn xếp. Các ô vuông màu vàng và 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)
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
```
 
   
     
     Absolute Positioning
     
   
   
     
       
     
   
 
```
6
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


 
   
     
     Absolute Positioning

10 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ử với

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

8 đượ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


 
   
     
     Absolute Positioning

43, 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ó

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

1 có liên quan đến khối chứa nó, thì vị trí và kích thước của phần tử có

#inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
 }

8 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

Thực hiện các thay đổi sau đối với mã CSS của bạn


 
   
     
     Absolute Positioning

7

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ị
```
#inner {
   width: 50%; height: 50%;
   background-color: #999;
   position: absolute;
   left: 1em;
 }
```
3 cho
```
 
   
     
     Absolute Positioning
     
   
   
     
       
     
   
 
```
23. (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.
```
#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
   position: static;
 }
```
2 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;

Phần kết luận

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

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

0,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

1,

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

2 và

#outer {
   margin: 5em;
   border: 1px solid #f00;
   height: 4em;
 }

 #inner {
   width: 6em;
   height: 4em;
   background-color: #999;
   position: absolute;
   left: 1em;
 }

3. 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 cách sử dụng thuộc tính


 
   
     
     Absolute Positioning

10. Khi


 
   
     
     Absolute Positioning

10 đượ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 tử con của nó

Làm cách nào để ghi đè phần đệm gốc trong CSS?

Bạn chỉ cần thêm lề âm cho phần tử con khớp với phần đệm của phần tử gốc . Không cần đặt chiều rộng, thay đổi kích thước hộp hoặc sử dụng định vị tuyệt đối.

Làm thế nào một div con có thể phù hợp với div cha?

Nếu bạn muốn các div con vừa với kích thước gốc, bạn nên đặt một lề ít nhất bằng kích thước của đường viền con trên các div con ( child. margin >= child. bordersize ).

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

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

Tại sao chỉ số Z của tôi không hoạt động?

Bạn đặt chỉ mục z trên phần tử tĩnh .

programming css

CSS kết xuất bên ngoài cha mẹ

chứa các khối

Định vị tuyệt đối

Chỉ định vị trí

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

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

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

định vị cố định

Phần kết luận

Làm cách nào để ghi đè phần đệm gốc trong CSS?

Làm thế nào một div con có thể phù hợp với div cha?

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

Tại sao chỉ số Z của tôi không hoạt động?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội