Hướng dẫn how do i overlay one div over another div in css? - làm cách nào để chồng một div lên một div khác trong css?

Giải pháp được chấp nhận hoạt động rất tốt, nhưng IMO thiếu một lời giải thích về lý do tại sao nó hoạt động. Ví dụ dưới đây được đun sôi theo những điều cơ bản và tách các CSS quan trọng với CSS kiểu dáng không liên quan. Như một phần thưởng, tôi cũng đã bao gồm một lời giải thích chi tiết về cách thức định vị CSS hoạt động.

TLDR; Nếu bạn chỉ muốn mã, hãy cuộn xuống kết quả. if you only want the code, scroll down to The Result.

Vấn đề

Có hai phần tử riêng biệt, anh chị em và mục tiêu là định vị phần tử thứ hai (với id của infoi), do đó nó xuất hiện trong phần tử trước đó (phần có class của navi). Cấu trúc HTML không thể thay đổi.

Giải pháp đề xuất

Để đạt được kết quả mong muốn, chúng tôi sẽ di chuyển hoặc vị trí, phần tử thứ hai mà chúng tôi sẽ gọi #infoi để nó xuất hiện trong phần tử thứ nhất mà chúng tôi sẽ gọi là .navi. Cụ thể, chúng tôi muốn #infoi được định vị ở góc trên bên phải của .navi.

Vị trí CSS Kiến thức bắt buộc

CSS có một số thuộc tính cho các yếu tố định vị. Theo mặc định, tất cả các yếu tố là

Các giá trị

• 9

• .wrapper {
    position: relative;
  }
  

  0

• .wrapper {
    position: relative;
  }
  

  1

• .wrapper {
    position: relative;
  }
  

  2

Nói cách khác, bằng cách cài đặt

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

Đây là nơi nhiều người mới CSS bị mất -

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

Khung vị trí của tham chiếu hoặc bối cảnh vị trí, có thể được thay đổi bằng cách đặt

• #infoi {
    position: absolute;
    top: 0;
    right: 0;
  }
  

  3

• #infoi {
    position: absolute;
    top: 0;
    right: 0;
  }
  

  4

• #infoi {
    position: absolute;
    top: 0;
    right: 0;
  }
  

  5

• #infoi {
    position: absolute;
    top: 0;
    right: 0;
  }
  

  6

Ví dụ: nếu một phần tử

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

.wrapper {
  position: relative;
}

.wrapper {
  position: relative;
}

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

Yếu tố khác cần lưu ý là thứ tự xếp chồng - hoặc làm thế nào các yếu tố được xếp chồng lên nhau theo hướng z. Theo mặc định, phải biết ở đây là thứ tự ngăn xếp của các phần tử được xác định bởi mặt trái của thứ tự của chúng trong cấu trúc HTML. Xem xét ví dụ sau: to be aware of is stack order - or how elements are stacked in the z-direction. The must-know here is the stack order of elements are, by default, defined by the reverse of their order in the HTML structure. Consider the following example:

  
Bottom
  
Top

Trong ví dụ này, nếu hai phần tử id4 được định vị ở cùng một vị trí trên trang, phần tử id5 sẽ bao gồm phần tử id6. Vì id5 xuất hiện sau id6 trong cấu trúc HTML, nó có thứ tự xếp chồng cao hơn.

Thứ tự xếp chồng có thể được thay đổi với CSS bằng các thuộc tính id9 hoặc infoi0.

Chúng ta có thể bỏ qua thứ tự xếp chồng trong vấn đề này vì cấu trúc HTML tự nhiên của các phần tử có nghĩa là phần tử chúng ta muốn xuất hiện trên

Vì vậy, trở lại vấn đề trong tay - chúng tôi sẽ sử dụng bối cảnh vị trí để giải quyết vấn đề này.

Giải pháp

Như đã nêu ở trên, mục tiêu của chúng tôi là định vị phần tử #infoi để nó xuất hiện trong phần tử .navi. Để làm điều này, chúng tôi sẽ kết thúc các phần tử .navi và #infoi trong một phần tử mới infoi6 để chúng tôi có thể tạo bối cảnh vị trí mới.

Sau đó tạo bối cảnh vị trí mới bằng cách cho infoi7

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

.wrapper {
  position: relative;
}

Với bối cảnh vị trí mới này, chúng ta có thể định vị #infoi trong vòng infoi7. Đầu tiên, cho #infoi

.wrapper {
  position: relative;
}

Sau đó thêm class5 và class6 để định vị phần tử #infoi ở góc trên cùng bên phải. Hãy nhớ rằng, vì phần tử #infoi đang sử dụng infoi7 làm bối cảnh vị trí của nó, nó sẽ nằm trong phần trên bên phải của phần tử infoi7.

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

Bởi vì infoi7 chỉ là một container cho .navi, định vị #infoi ở góc trên bên phải của infoi7 mang lại hiệu ứng được định vị ở góc trên bên phải của .navi.

Và chúng tôi có nó, #infoi bây giờ dường như ở góc trên bên phải của .navi.

Kết quả

Ví dụ dưới đây được đưa xuống những điều cơ bản, và chứa một số kiểu dáng tối thiểu.

Một giải pháp thay thế (lưới)

Dưới đây là một giải pháp thay thế sử dụng lưới CSS để định vị phần tử .navi với phần tử #infoi ở phía bên phải. Tôi đã sử dụng các thuộc tính dài dòng #infoi0 để làm cho nó rõ ràng nhất có thể.

Một giải pháp thay thế (không bao bọc)

Trong trường hợp chúng tôi không thể chỉnh sửa bất kỳ HTML nào, có nghĩa là chúng tôi không thể thêm phần tử trình bao bọc, chúng tôi vẫn có thể đạt được hiệu ứng mong muốn.

Thay vì sử dụng

.wrapper {
  position: relative;
}

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

.wrapper {
  position: relative;
}

Làm cách nào để ghi đè một div trên một div khác?

Làm cách nào để chồng chéo một yếu tố với CSS khác?

Chúng ta có thể phủ lên div không?